1分でわかるテンプレートエンジンHandlebars.jsの使い方

基本的な使い方

まず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);

Handlebars.jsの使い方 basic

eachで配列を繰り返し処理

このように{{#each 配列}}{{/each}}を使用すれば配列を繰り返し処理することが可能。

<ul>
{{#each people}}
<li>{{id}} {{name}}</li>
{{/each}}
</ul>

Handlebars.jsの使い方 each

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>

Handlebars.jsの使い方 if

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の使用をおすすめする。

Handlebars.js 公式サイト