Basic Usage
1，最简单的handlebars 表达式
<h1>{{title}}</h1>
使用时，会在当前context里找名为title的property，替换之。
2，handlebars表达式也可以是一个带‘.’的paths
<h1>{{article.title}}</h1>
该表达式会在current context里查找article属性，在result里接着找title。如果没有传article变量，页面是不能接收到值，但也不会报错（underscore这种情况会报错）。
handlebars也支持用斜杠来替换上述"."的效果。
<h1>{{article/title}}</h1>
3，表达式可以是任意unicode character， 除了下面这些：
! " # % & ' ( ) * + , . / ; < = > @ [ \ ] ^ ` { | } ~
4，handlebars的表达式的值传到模板里时会对特殊字符进行escape，如果想要传过去的html代码能够以html的形式表现效果，而不是被当做字符串显示，就要用到{{{expression}}}。
Block Helpers
1，定义一个简单的块级helper
Handlebars.registerHelper('noop', function(options) {
return options.fn(this);
});
这个noop helper 接受一个options对象，这个对象有一个fn方法，这个方法只是简单的执行模板编译和填值，它执行时会带有一个上下文，并且会返回一个字符串。
这里的this总是指向当前的上下文（使用已经编译好的模板时传入的context）。
使用 noop helper可以如下
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{#noop}}{{body}}{{/noop}}
</div>
</div>
2，bold helper
Handlebars.registerHelper('bold', function(options) {
return new Handlebars.SafeString(
'<div style="font-weight:bold;">'
+ options.fn(this)
+'</div>'
);
})
使用
<div class="body">
{{#bold}}{{body}}{{/bold}}
</div>
生成的html代码如下
<div class="body">
<div style="font-weight:bold;">This is my first post!</div>
</div>
3，with helper
Handlebars.registerHelper('with', function(context, options) {
return options.fn(context);
});
接收#with 后面传入的参数，将其作为context传给options.fn函数，好比将#with内的部分作为子模板再传入子模板的上下文。
使用如下：
<div class="entry">
<h1>{{title}}</h1>
{{#with story}}
<div class="intro">{{{intro}}}</div>
<div class="body">{{{body}}}</div>
{{/with}}
</div>
在context的嵌套较深的时候非常有用。
Simple Iterators
4，each helper
Handlebars.registerHelper('each', function(context, options) {
var ret = "";
for(var i=0, j=context.length; i<j; i++) {
ret = ret + options.fn(context[i]);
}
return ret;
});
每次执行options.fn(context[i])都对#each之间的模板进行填值并返回字符串。
5，list helper
Handlebars.registerHelper('list', function(context, options) {
var ret = "<ul>";
for(var i=0, j=context.length; i<j; i++) {
ret = ret + "<li>" + options.fn(context[i]) + "</li>";
}
return ret + "</ul>";
});
使用#list会返回一个序列。当然，在定义这个helper的时候，也可以使用别的库来让代码更简洁。
比如
Handlebars.registerHelper('list', function(context, options) {
return "<ul>" + context.map(function(item) {
return "<li>" + options.fn(item) + "</li>";
}).join("\n") + "</ul>";
});
6，conditionals
简单的#if
Handlebars.registerHelper('if', function(conditional, options) {
if(conditional) {
return options.fn(this);
}
});
如果要控制结构，比如如下使用情况
{{#if isActive}}
<img src="star.gif" alt="Active">
{{else}}
<img src="cry.gif" alt="Inactive">
{{/if}}
这时就需要在条件求值返回false时候执行的模板代码
Handlebars.registerHelper('if', function(conditional, options) {
if(conditional) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
暂时学到这里，后续下回再来...