プロジェクト:ウィキ技術部/Mustacheテンプレート
MediaWiki 1.25より、Mustache テンプレートを使ったHTML出力が可能になっています。
基本的にはサーバー上にテンプレートファイルを設置したり読み込んだりできるサイト管理者向けの機能ですが、一般のウィキ利用者もJavaScirptで完結する形で利用可能です。なお、Template名前空間で使うテンプレートとは関係ありません。
できること 編集
以下のようなテンプレートがあるとします。
<a href="{{uri}}">Hello {{text}}!</a>
これに、次のようなデータを渡すと、
{
uri: 'http://example.com/',
text: 'mustache'
}
以下のようなHTMLが生成されます。
<a href="http://example.com/">Hello mustache!</a>
この例はごく単純ですが、ほかに繰り返し処理、条件分岐等が可能です。Mustacheの文法については公式リファレンスを参照してください。
JavaScriptでの利用方法 編集
以下の記述で、テンプレート文字列をコンパイラに登録し、コンパイル済みテンプレートのインスタンスを取得します。
var moduleName = '_client',
templateName = 'sample.mustache',
templateBody = '<a href="{{uri}}">Hello {{text}}!</a>';
var template = mw.template.add(moduleName, templateName, templateBody);
moduleNameは何でも構いません。（本来は既存のモジュールに新規テンプレートを追加する目的の機能なので、ResourceLoaderで設定したモジュール名称を指定します）templateNameには任意のテンプレート名称を指定しますが、必ず.に続けてテンプレートエンジンの名前が必要です。この場合.mustacheになります。templateBodyにはテンプレート本体の文字列を指定します。
得られたインスタンスのrender()メソッドにパラメータを持つオブジェクトを渡すことで、生成されたHTML（jQueryインスタンス）が返ります。
var data = {
uri: 'http://example.com/',
text: 'mustache'
};
$('body').append(template.render(data));
// => <a href="http://example.com/">Hello mustache!</a>
data.text = 'MediaWiki';
$('body').append(template.render(data));
// => <a href="http://example.com/">Hello MediaWiki!</a>
登録済みのテンプレートはいつでもmw.template.get()でインスタンスを取得できます。
var template = mw.template.get('_client', 'sample.mustache');
$('body').append(template.render(data));
もっと単純に、Mustacheライブラリを直接使用することもできます。使い捨てのものであればこれで十分かもしれません。
var rendered = Mustache.render(templateBody, data);
$('body').append(rendered);
使用例 編集
- MediaWiki:Common.js - modifyEditsection 内で、節編集リンク拡張のリンクを生成するのに利用しています。