npm install handlebars
handlebars
handlebars: command not found
パスが通っていないので
./node_modules/.bin/handlebars
文法は公式を参照
Handlebars.js: Minimal Templating on Steroids
いい感じに名前空間くぎってのコンパイルの仕方はnpmリポジトリ参考
npm : gulp-handlebars
ことはじめるまでもありませんでした。
・・・なんですが、一つだけ。
今回初めてjavascriptテンプレートというものを使ったのであんまり空気感がわかってませんでしたが、handlebarsはifの制御構文は記述できるものの、評価に式を使う事はできないというのはちょっと戸惑います。
OK
{{#if something }}
<p>hogehoge</p>
{{/if}}
NG
{{#if (num > 10) }}
<p>hogehoge</p>
{{/if}}
公式によると false
,undefined
,null
,0
,""
,[]
以外はture扱いという事らしいです。
テンプレートに流す前に評価してやらないといけないと言う事ですね。まぁつまりロジックはロジック側でということらしいです。
ちなみに、handlebarsではこのifなどの制御構文はHelper関数で定義していて、さらに自作のHelper関数を追加できます。ということは式を評価するifっぽいのつくれるのでは?
Handlebars.registerHelper('myif', function(val1,operator,val2, opt) {
var cond;
if ( operator === '===' )
{
cond = val1 === val2;
}
else if ( operator === '!==' )
{
cond = val1 !== val2;
}
else if ( operator === '==' )
{
cond = val1 == val2;
}
else if ( operator === '!=' )
{
cond = val1 != val2;
}
else if ( operator === '>' )
{
cond = val1 > val2;
}
else if ( operator === '>=' )
{
cond = val1 >= val2;
}
else if ( operator === '<' )
{
cond = val1 < val2;
}
else if ( operator === '<=' )
{
cond = val1 <= val2;
}
if (cond) {
return opt.fn(this);
} else {
return opt.inverse(this);
}
});
sample.hbs
{{#myif num1 ">=" num2}}
<p>TRUE!</p>
{{else}}
<p>FALSE!!</p>
{{/myif}}
index.html
// sample.hbsをコンパイルした後
var html1 = Handlebars.templates['sample.hbs']({
num1 : 10,
num2 : 20,
});
console.log(html); // <p>FALSE!!</p>
とまぁ簡単にできますが、こういうことをしてテンプレートにロジックを持って行くのが良くないという思想だと思いますので良くない気がします。以上。