基本的な使い方
まずHandlebars.jsを読み込みます。
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js
次にテンプレートをこのように作成。テンプレートはscriptタグで囲みidとtype="text/x-handlebars-template"を指定する。
変数は{{ }}で囲み、エスケープしない場合は{{{ }}}で囲む。
<script id="input" type="text/x-handlebars-template"> {{id}} {{name}} {{id}} {{{name}}} </script>
最後にJavaScriptでテンプレート部分の値をオブジェクトで用意して下記の記述でコンパイルするだけ。
公式サイトだとjQueryを使用した記述が使用されているが下記のサンプルはセレクタ指定用の$関数を作成してjQueryを使わずに記述。
var values = { id: 123, name: "yamada<u>★</u>" }; function $(selector) { return document.querySelector(selector); } var template = Handlebars.compile($('#input').innerHTML); $('#output').innerHTML = template(values);
eachで配列を繰り返し処理
このように{{#each 配列}}{{/each}}を使用すれば配列を繰り返し処理することが可能。
<ul> {{#each people}} <li>{{id}} {{name}}</li> {{/each}} </ul>
ifで条件分岐
ifを使用すれば条件分岐が使用可能だが{{#if foo > 10}}のように条件式をテンプレート内に直接記述することはできない。
さらに{{#if !foo}}のように論理否定演算子を使用することはできず、この場合は{{#unless foo}}となる点に注意。
<script id="input" type="text/x-handlebars-template"> flag1は{{#if flag1}}true{{else}}false{{/if}} flag2は{{#if flag2}}true{{else}}false{{/if}} </script>
registerHelper
registerHelperを使用するとこのようにデータバインド構文の作成などができる。
<script id="input" type="text/x-handlebars-template"> {{#list people}}{{firstName}} {{lastName}}{{/list}} {{#links data}}{{/links}} </script>
Handlebars.jsの使い方 registerHelper
Handlebars.jsは使用しないほうが良い
Handlebars.jsは使い勝手が悪いので新規で何かを作成するのであればできれば使用しないほうが良い。
個人的にはAngularかReactの使用をおすすめする。