細かすぎて伝わらないjQuery拡張 (16) “$.render” – Advent Calendar 2016
この記事は賞味期限切れです。(更新から1年が経過しています)
$.render() は単機能のテンプレート関数です。 エンジンと呼称するにはおこがましいくらい単機能です。
$.render(template, data)
使い方
// template と data を渡すと即時展開
$.render("わたしは{{name}}、{{age}}歳だ!", {
name: "ジョン",
age: 23
});
// => "わたしはジョン、23歳だ!"
// template のみの場合は関数を返す
var render = $.render("わたしは{{name}}、{{age}}歳だ!");
render({name: "ジョン", age: 23}); // => "わたしはジョン、23歳だ!"
// キー名はドットシンタックスが使える
$.render("{{user.name}}, {{user.age}}", {
user: {
name: "john",
age: 23
}
});
// => "john, 23"
// {{key}} はHTMLをエスケープする
// {{{key}}} はHTMLをエスケープしない
$.render("{{content}}, {{{content}}}", {
content: "<script>"
});
// => "<script>, <script>"
- テンプレートとデータを渡してキーを基に差し替えて返します。
- data を渡さないことで、_.templateのようにレンダー関数を返す事もできます。
- キー名にはドットシンタックスが使えます。(先に紹介した $.dig を内部で使用)
- “{{key}}” はHTMLエスケープします。(先に紹介した $.escapeHTML を内部で使用)
- “{{{key}}}” はエスケープせずにそのまま出力します。
テンプレートの体裁は Mustache っぽいですが、条件分岐やループ処理などは搭載していません。 本当にテンプレートに値をはめ込むだけの機能しかありません。 敢えて言わせていただくと、「MustacheなりHandlebarsをつかっておけ」で済む話ですね。
コード
$.render = function(template, data){
var func = function(vars){
return template.replace(/([\{]{2,3})([\w\.\-]+)([\}]{2,3})/g, function(a,b,c){
var value = $.dig(c, vars) || "";
value = (b.length > 2) ? value : $.escapeHTML(value);
return value;
});
};
return data === void 0 ? func : func(data);
}
6年前に書いた以下のエントリーの物から余計な物を削って若干改修・簡略化した関数です。
HTMLのテンプレートとして使うには力不足が否めない関数ですが、 URL文字列を組み立てたりするプレースホルダとしてなら、コード量少ないですし使い道があるかもしれませんね。 ないかもしれませんね。
コメント