JsRenderの使い方その2

# はじめに
[前回、JsRenderの基本的な使い方を紹介した。](https://qiita.com/kurukuruz/items/f53a17d7e78dca8677b8)
今回はもう少し発展的な使い方を紹介する。


# 検証
## 親・子オブジェクトの変数取得について
### __子オブジェクトの変数取得__  
`{{for 子オブジェクト}}...{{/for}}`で囲まれた中で`{{>変数名}}`を記述すると子オブジェクトの変数を取得できる。
また`{{>子オブジェクト.変数名}}`と記述しても同様に取得できる。

```html
<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>
```
```javascript
var data1 = {
  name:"hoge",
  child:{name:"foo"}
};
$("#ul1").append($("#tmpl1_1").render(data1));
$("#ul1").append($("#tmpl1_2").render(data1));
```
⇒ ![tmpl1.png](https://qiita-image-store.s3.amazonaws.com/0/266076/fd8c86a5-33d1-72c0-020a-b4310cd68b62.png)


### __親オブジェクトの変数取得__  
`~root`変数を使うとテンプレート内のどの位置からでもテンプレートに投入したデータオブジェクトを取得することができる。  
`~root`と上項の`オブジェクト.変数`構文を使用して以下のように記述することで`{{for オブジェクトまたは配列}}...{{/for}}`で囲まれた中でも親要素の変数を取得することができる。

```html
<ul id="ul2"></ul>
<script id="tmpl2" type="text/x-jsrender">
  {{for children}}
    <li>{{:name}}@{{:~root.name}}</li>
  {{/for}}
</script>
```
```javascript
var data2 = {
  name:"hoge",
  children:[
    {name:"foo"},
    {name:"bar"},
  ]
};
$("#ul2").append($("#tmpl2").render(data2));
```
⇒ ![tmpl2.png](https://qiita-image-store.s3.amazonaws.com/0/266076/7d3f156f-db7b-d677-888c-97fcfefe1431.png)


## テンプレートでの別テンプレートの使用
### 同じデータの受け渡し
`{{include tmpl="別テンプレート"/}}`という構文を使用するとその部分は別テンプレートからhtmlが生成される。

```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>
```
```javascript
var data3 = {
  name:"Steelers",
  city:"Pittsburgh",
  state:"Pennsylvania",
};
$("#ul3").append($("#tmpl3").render(data3));
```
⇒ ![tmpl3.png](https://qiita-image-store.s3.amazonaws.com/0/266076/b5f76aae-94a4-1f4a-0363-a6fba3daad4e.png)


### 子要素の受け渡し
`{{for 子配列またはオブジェクト tmpl="別テンプレート"/}}`という構文により指定した子要素のみを別テンプレートに受け渡すことができる。配列の場合はイテレーションされる。
また、`{{include 子オブジェクト tmpl="別テンプレート"/}}`でも同様の結果となる。ただし`include`は__イテレーションされない__ので子配列には用いるべきはない。

```html
<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>
```
```javascript
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](https://qiita-image-store.s3.amazonaws.com/0/266076/d4ed48ff-c3cb-5685-eb14-06c8577967f0.png)


### 再帰的なテンプレート利用
`tmpl="..."`には自分自身を指定することもでき、再帰的な階層構造を作成することも可能である。

```html
<ul id="ul6"></ul>
<script id="tmpl6" type="text/x-jsrender">
  <li>
    {{:name}}
    <ul>
      {{for children tmpl="#tmpl6"/}}
    </ul>
  </li>
</script>
```
```javascript
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](https://qiita-image-store.s3.amazonaws.com/0/266076/db7f355f-938c-24d1-9d03-6593ff1dd136.png)


# 参考サイト
* [JsRender/JsViews](https://www.jsviews.com/#home)
* [[jsviews]JsRenderチュートリアル - テンプレートで使える特殊な変数とその中身](http://d.hatena.ne.jp/shimooka/20150319)