はじめに
前回、JsRenderの基本的な使い方を紹介した。
今回はもう少し発展的な使い方を紹介する。
検証
親・子オブジェクトの変数取得について
子オブジェクトの変数取得
{{for 子オブジェクト}}...{{/for}}で囲まれた中で{{>変数名}}を記述すると子オブジェクトの変数を取得できる。
また{{>子オブジェクト.変数名}}と記述しても同様に取得できる。
<ul id="ul1"></ul>
<script id="tmpl1_1" type="text/x-jsrender">
<li>
{{:name}} >
{{for child}}
{{:name}}
{{/for}}
</li>
</script>
<script id="tmpl1_2" type="text/x-jsrender">
<li>{{:name}} > {{:child.name}}</li>
</script>
var data1 = {
name:"hoge",
child:{name:"foo"}
};
$("#ul1").append($("#tmpl1_1").render(data1));
$("#ul1").append($("#tmpl1_2").render(data1));
⇒ 
親オブジェクトの変数取得
~root変数を使うとテンプレート内のどの位置からでもテンプレートに投入したデータオブジェクトを取得することができる。
~rootと上項のオブジェクト.変数構文を使用して以下のように記述することで{{for オブジェクトまたは配列}}...{{/for}}で囲まれた中でも親要素の変数を取得することができる。
<ul id="ul2"></ul>
<script id="tmpl2" type="text/x-jsrender">
{{for children}}
<li>{{:name}}@{{:~root.name}}</li>
{{/for}}
</script>
var data2 = {
name:"hoge",
children:[
{name:"foo"},
{name:"bar"},
]
};
$("#ul2").append($("#tmpl2").render(data2));
⇒ 
テンプレートでの別テンプレートの使用
同じデータの受け渡し
{{include tmpl="別テンプレート"/}}という構文を使用するとその部分は別テンプレートからhtmlが生成される。
<ul id="ul3"></ul>
<script id="tmpl3" type="text/x-jsrender">
<li>{{:name}} - {{include tmpl="#tmpl3_child"/}}</li>
</script>
<script id="tmpl3_child" type="text/x-jsrender">
<span><b>{{:city}}</b>, {{:state}}</span>
</script>
var data3 = {
name:"Steelers",
city:"Pittsburgh",
state:"Pennsylvania",
};
$("#ul3").append($("#tmpl3").render(data3));
⇒ 
子要素の受け渡し
{{for 子配列またはオブジェクト tmpl="別テンプレート"/}}という構文により指定した子要素のみを別テンプレートに受け渡すことができる。配列の場合はイテレーションされる。
また、{{include 子オブジェクト tmpl="別テンプレート"/}}でも同様の結果となる。ただしincludeは__イテレーションされない__ので子配列には用いるべきはない。
<ul id="ul4"></ul>
<script id="tmpl4" type="text/x-jsrender">
<li>
{{:name}}
<ul>
{{for home tmpl="#tmpl4_child"/}}
</ul>
</li>
</script>
<script id="tmpl4_child" type="text/x-jsrender">
<li><b>{{:city}}</b>, {{:state}} ({{:period}})</li>
</script>
var data4 = {
name:"Rams",
home:[
{city:"Los Angeles", state:"California", period:"2016-"},
{city:"St. Louis", state:"Missouri", period:"-2015"},
{city:"Los Angeles", state:"California", period:"-1994"},
{city:"Cleveland", state:"Ohio", period:"1937-1945"},
]
};
$("#ul4").append($("#tmpl4").render(data4));
var data5 = {
name:"Steelers",
home:{city:"Pittsburgh", state:"Pennsylvania", period:"1933-"}
};
$("#ul4").append($("#tmpl4").render(data5));
⇒ 
再帰的なテンプレート利用
tmpl="..."には自分自身を指定することもでき、再帰的な階層構造を作成することも可能である。
<ul id="ul6"></ul>
<script id="tmpl6" type="text/x-jsrender">
<li>
{{:name}}
<ul>
{{for children tmpl="#tmpl6"/}}
</ul>
</li>
</script>
var data6 = [
{
name:"Opt1",
children:[
{name:"Opt1-1", children:[{name:"Opt1-1-1"}, {name:"Opt1-1-2"}]},
{name:"Opt1-2"}
]
},
{
name:"Opt2"
},
];
$("#ul6").append($("#tmpl6").render(data6));
⇒ 