JsRenderを使ってみる

jQueryを使用している案件でテンプレート的な機能を使いたいことがあったので、JsRenderというライブラリを使ってみました。
今回はjQueryのプラグインとして使用しますが、JsRender自体はjQuery無しでも使用できます。

サンプルコード

JsRenderのインストールはこちらをご確認ください。
今回はjQuery本体と合わせてCDNから読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.8/jsrender.min.js"></script>

次にテンプレートとその出力先を用意します。
テンプレートはscriptタグのtype属性にtext/x-jsrenderを設定して、その中にテンプレートとして使用するHTMLを定義します。

<div id="result"></div>

<script id="myTmpl" type="text/x-jsrender">
<div>{{:name}} {{:age}}歳 誕生日:{{:birthday}}</div>
</script>

#resultが出力先で、scriptタグのidは後の紐付けで使用します。

テンプレート内で使用するデータを用意します。

var data = {
	 "name": "Lize Helesta",
	 "age": 17,
	 "birthday": "5/25",
};

最後にJavaScriptでテンプレートの読み込みと出力を行います。

$(function() {
	var tmpl = $.templates("#myTmpl");
	var html = tmpl.render(data);
	$("#result").html(html);
});

これでデータを使用したテンプレートの出力ができました。
JsRenderのデモページ

先ほどはデータがオブジェクト形式でしたが、データが配列の場合も試してみます。
先ほどのデモからテンプレートと出力先を少し変更します。

<ul id="result"></ul>

<script id="myTmpl" type="text/x-jsrender">
<li>{{:id}} : {{:name}}</li>
</script>

配列形式のデータを用意して、合わせてJavaScriptでデータの読み込み部分も少し修正します。

var data = {
	"vtuber": [
		{ "id": 0, "name": "Lize Helesta" },
		{ "id": 1, "name": "Ange Katrina" },
		{ "id": 2, "name": "Toko Inui" }
	]
};

$(function() {
	var tmpl = $.templates("#myTmpl");
	var html = tmpl.render(data.vtuber);
	$("#result").html(html);
});

データを配列にした場合、配列内のアイテム毎に1回レンダリングを行うようになります。
データが配列形式の場合のデモページ

ここまでのデモではテンプレートのHTMLをscriptタグ内で定義していましたが、JavaScriptの変数で定義することもできます。

$(function() {
	var tmpl = $.templates("<li>{{:id}} : {{:name}}</li>");
	var html = tmpl.render(data.vtuber);
	$("#result").html(html);
});

テンプレートを変数で定義する場合のデモページ

テンプレートタグ

先ほどのデモのテンプレート内でデータを出力する際、「{{:name}}」のように記述しましたが、このようなテンプレートタグは他にもいくつかあります。

{{: …}}

ここまでのデモで使用したテンプレートタグで、指定した値を挿入します。
テンプレートタグ内で演算などもできます。
デモページ

{{> …}}

指定した値をHTMLエンコードした状態で挿入します。
デモページ

{{!– … –}}

テンプレート内にコメントを追加したい時に使用します。
デモページ

{{for …}} 〜 {{/for}}

データ内での配列をループしたい時に使用します。
属性値としてデータのkeyを指定して、ループ内での値は{{:#data}}で出力できます。
デモページ

配列がない場合の判定をしたい場合、{{else}}を使用できます。
デモページ

ループ内で使用するテンプレートを別途用意して、{{for tmpl=”テンプレートを指定” /}}のような形で指定することも可能です。
デモページ

{{props …}} 〜 {{/props}}

データ内でのオブジェクトをループしたい時に使用します。
属性値としてデータのkeyを指定して、ループ内でkeyは{{:key}}、valueは{{:prop}}で出力できます。
デモページ

{{if …}} 〜 {{else}} 〜 {{/if}}

値を評価して条件分岐したい時に使用します。
{{if}}と{{else}}に属性値としてデータのkeyを指定します。({{else}}は指定しなくても使用可能。)
デモページ

{{include …}}

テンプレート内で指定した別のテンプレートをインクルードして使用します。
デモページ