Help us understand the problem. What is going on with this article?

JsRenderの使い方その2

More than 1 year has passed since last update.

はじめに

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

tmpl1.png

親オブジェクトの変数取得

~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));

tmpl2.png

テンプレートでの別テンプレートの使用

同じデータの受け渡し

{{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));

tmpl3.png

子要素の受け渡し

{{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));

tmpl4.png

再帰的なテンプレート利用

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));

tmpl6.png

参考サイト

kurukuruz
担当業務はおもにWebアプリまわり。静的型付け大好き(暗黙キャストはOK)。 使用言語は主にJava、JavaScript/TypeScript、たまにbash。 興味のあるF/WはSV側ならSpringBoot、CL側ならVue(+Vuetify)。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away