[handlebars.js]チートシート

# 公式ドキュメント
詳しくは、[Handlebars.js: Minimal Templating on Steroids](http://handlebarsjs.com/)
欲しい機能がビルドインされてなければ、拡張する。
大体思いつく拡張機能は既に誰かが実装済みなので、探してから作る。
# チートシート
## 基本

#### json object
```js
{
  "hoge":"fuga",
  "booleanTrue": true,
  "booleanFalse": false,
  "typeNull": null,
  "emptyArray": [],
  "array": ["a","b","c"],
  "emptyObject": {},
  "object": {"a":"A", "b": "B", "c": "C"}
}
```
#### template html
```html
<p>hoge:{{hoge}}</p> 
<p>booleanTrue:{{booleanTrue}}</p> 
<p>booleanFalse:{{booleanFalse}}</p> 
<p>typeNull:{{typeNull}}</p>
<p>emptyArray:{{emptyArray}}</p> 
<p>array:{{array}}</p> 
<p>emptyObject:{{emptyObject}}</p> 
<p>object:{{object}}</p> 
```

#### result
```html
<p>hoge:fuga</p>
<p>booleanTrue:true</p>
<p>booleanFalse:false</p>
<p>typeNull:</p>
<p>emptyArray:</p>
<p>array:a,b,c</p>
<p>emptyObject:[object Object]</p>
<p>object:[object Object]</p>
```
## unescape HTML
#### json object
```js
{
  "unescape":"<b>hoge</b>",
  "escape":"<b>fuga</b>",
}
```
#### template html
```html
<p>unescape:{{{unescape}}}</p> 
<p>escape:{{escape}}</p> 
```

#### result
```html
<p>unescape:<b>hoge</b></p>
<p>escape:&lt;b&gt;fuga&lt;/b&gt;</p>
```

## if/else, unless/else

#### json object
```js
{
  "hoge":"fuga",
  "booleanTrue": true,
  "booleanFalse": false,
  "typeNull": null,
  "emptyArray": [],
  "array": ["a","b","c"],
  "emptyObject": {},
  "object": {"a":"A", "b": "B", "c": "C"}
}
```
#### template html
```html
<p>hoge:{{#if hoge}}true{{else}}false{{/if}}</p> 
<p>booleanTrue:{{#if booleanTrue}}true{{else}}false{{/if}}</p> 
<p>booleanFalse:{{#if booleanFalse}}true{{else}}false{{/if}}</p> 
<p>typeNull:{{#if typeNull}}true{{else}}false{{/if}}</p>
<p>emptyArray:{{#if emptyArray}}true{{else}}false{{/if}}</p> 
<p>array:{{#if array}}true{{else}}false{{/if}}</p> 
<p>emptyObject:{{#if emptyObject}}true{{else}}false{{/if}}</p>
<p>object:{{#if object}}true{{else}}false{{/if}}</p> 
<p>hoge:{{#unless hoge}}true{{else}}false{{/unless}}</p> 
```

#### result
```html
<p>hoge:true</p>
<p>booleanTrue:true</p>
<p>booleanFalse:false</p>
<p>typeNull:false</p>
<p>emptyArray:false</p>
<p>array:true</p>
<p>emptyObject:true</p>
<p>object:true</p>
<p>hoge:false</p>
```

## each
{{@index}}や{{@key}}、{{this}}がポイント。
他にも{{@root}}とか{{@first}}/{{@last}}などある。
#### json object
```js
{
  "emptyArray": [],
  "array": ["a","b","c"],
  "emptyObject": {},
  "object": {"a":"A", "b": "B", "c": "C"}
}
```
#### template html
```html
<h3>emptyArray</h3>
{{#each emptyArray}}
  <p>{{@index}}-{{@key}}__{{this}}</p>
{{/each}}

<h3>array</h3>
{{#each array}}
  <p>{{@index}}-{{@key}}__{{this}}</p>
{{/each}}

<h3>emptyObject</h3>
{{#each emptyObject}}
  <p>{{@index}}-{{@key}}__{{this}}</p>
{{/each}}

<h3>object</h3>
{{#each object}}
  <p>{{@index}}-{{@key}}__{{this}}</p>
{{/each}}
```

#### result
```html
<h3>emptyArray</h3>
<h3>array</h3>
<p>0-0__a</p>
<p>1-1__b</p>
<p>2-2__c</p>
<h3>emptyObject</h3>
<h3>object</h3>
<p>0-a__A</p>
<p>1-b__B</p>
<p>2-c__C</p>
```

## nested each
{{@../index}}や{{@../key}}が忘れがち
#### json object
```js
{
  "hoge":"fuga",
  "object-object":{
    "object1": {"key":"ONE"},
    "object2": {"key":"TWO"}
  },
  "array-object": [
    {"key1":"A", "key2": "B", "key3": "C"},
    {"key1":"D", "key2": "E", "key3": "F"}
  ]
}
```
#### template html
```html
<h3>object-object</h3>
{{#each object-object}}
    {{#each this}}
    <p>[{{@../index}}-{{@../key}}__{{../../hoge}}] {{@index}}-{{@key}}__{{this}}</p>
    {{/each}}
{{/each}} 
<h3>array-object</h3>
{{#each array-object}}
    {{#each this}}
      <p>[{{@../index}}-{{@../key}}__{{../../hoge}}] {{@index}}-{{@key}}__{{this}}</p>
    {{/each}}
{{/each}} 
```

#### result
```html
<h3>object-object</h3>
<p>[0-object1__fuga] 0-key__ONE</p>
<p>[1-object2__fuga] 0-key__TWO</p>

<h3>array-object</h3>
<p>[0-0__fuga] 0-key1__A</p>
<p>[0-0__fuga] 1-key2__B</p>
<p>[0-0__fuga] 2-key3__C</p>
<p>[1-1__fuga] 0-key1__D</p>
<p>[1-1__fuga] 1-key2__E</p>
<p>[1-1__fuga] 2-key3__F</p>
```

## lookup
他の配列やオブジェクトを参照しにいくときに使う。
#### json object
```js
{
    "object1": {"key1":"object1-value1","key2":"object1-value2"},
    "object2": {"key1":"object2-value1","key2":"object2-value2"}
}
```
#### template html
```html
{{#each object1}}
    <p>[{{@key}}__{{this}}] {{lookup ../object2 @key}}</p>
{{/each}}
```

#### result
```html
<p>[key1__object1-value1] object2-value1</p>
<p>[key2__object1-value2] object2-value2</p>
```