[handlebars.js]チートシート

公式ドキュメント

詳しくは、Handlebars.js: Minimal Templating on Steroids
欲しい機能がビルドインされてなければ、拡張する。
大体思いつく拡張機能は既に誰かが実装済みなので、探してから作る。

チートシート

基本

json object

{
  "hoge":"fuga",
  "booleanTrue": true,
  "booleanFalse": false,
  "typeNull": null,
  "emptyArray": [],
  "array": ["a","b","c"],
  "emptyObject": {},
  "object": {"a":"A", "b": "B", "c": "C"}
}

template 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

<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

{
  "unescape":"<b>hoge</b>",
  "escape":"<b>fuga</b>",
}

template html

<p>unescape:{{{unescape}}}</p> 
<p>escape:{{escape}}</p> 

result

<p>unescape:<b>hoge</b></p>
<p>escape:&lt;b&gt;fuga&lt;/b&gt;</p>

if/else, unless/else

json object

{
  "hoge":"fuga",
  "booleanTrue": true,
  "booleanFalse": false,
  "typeNull": null,
  "emptyArray": [],
  "array": ["a","b","c"],
  "emptyObject": {},
  "object": {"a":"A", "b": "B", "c": "C"}
}

template 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

<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

{
  "emptyArray": [],
  "array": ["a","b","c"],
  "emptyObject": {},
  "object": {"a":"A", "b": "B", "c": "C"}
}

template 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

<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

{
  "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

<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

<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

{
    "object1": {"key1":"object1-value1","key2":"object1-value2"},
    "object2": {"key1":"object2-value1","key2":"object2-value2"}
}

template html

{{#each object1}}
    <p>[{{@key}}__{{this}}] {{lookup ../object2 @key}}</p>
{{/each}}

result

<p>[key1__object1-value1] object2-value1</p>
<p>[key2__object1-value2] object2-value2</p>