标签：style blog color os 使用 io ar for art
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}}}。
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的嵌套较深的时候非常有用。
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); } });
暂时学到这里，后续下回再来...
标签：style blog color os 使用 io ar for art
原文地址：http://www.cnblogs.com/huhy/p/3945661.html
