はじめに

前回、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));

⇒

JsRenderの使い方その2