LoginSignup
28

More than 5 years have passed since last update.

[handlebars.js]チートシート

Last updated at Posted at 2015-05-06

公式ドキュメント

詳しくは、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>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28