Handlebars是⼀款很⾼效的模版引擎,提供语意化的模版语句,最⼤的兼容Mustache模版引擎, 提供最⼤的Mustache模版引擎兼容, ⽆需学习新语法即可使⽤;

Handlebars.js和Mustache 的

⽬前版本为 2.0.0, ⽆压缩的情况下⽬测是 3000⾏源代码,约 200kb;下⾯这个是基本的模版表达式,

其中 {{ 和 }} 之间为handlerbars的变量;

把数据放到⾃⼰定义的

编译模版

使⽤ Handlebars.compile 进⾏编译模版;var source = $(\"#entry-template\").html();var template = Handlebars.compile(source);智能编译模版(在移动端也能运⾏哦么么哒)

⽣成html代码

通过上⾯的模版和数据混合编译后的结果:var context = {title: \"标题\", body: \"我是字符串!\"}var html = template(context);JS⽣成的结果如下:

//代码如下

//模版的代码和JS的代码如防⽌HTML被转义的⽅法;

{{ }}和 {{{}}}和区别就是, 如果你不希望变量⾥⾯的字符串被转义就使⽤{{{ }}}对变量进⾏处理;

{

title: \"All about

Tags\",

body: \"

This is a post about <p> tags

定义的Helper如下

Handlebars.registerHelper('link', function(text, url) { text = Handlebars.Utils.escapeExpression(text); url = Handlebars.Utils.escapeExpression(url); var result = '' + text + ''; return new Handlebars.SafeString(result); }); 渲染以后的结果如下：

//代码如下:

Handlerbars的⾃定义表达式

块表达式允许你定义 helpers ⽣成⾃定义的HTML,下⾯这个是JS的模版;{{#list people}}{{firstName}} {{lastName}}{{/list}}如果你使⽤下⾯的数据:{

people: [

{firstName: \"Yehuda\", lastName: \"Katz\"}, {firstName: \"Carl\", lastName: \"Lerche\"},

{firstName: \"Alan\", lastName: \"Johnson\"} ]}

在JS⾥⾯定义这个helper;

Handlebars.registerHelper('list', function(items, options) { var out = \"

\";

for(var i=0, l=items.length; iout = out + \"

• \" + options.fn(items[i]) + \"
\" ; /*options.fn相当于⼀个编译的函数*/ }

return out + \"

执⾏以后的结果是:

• Yehuda Katz
• Carl Lerche
• Alan Johnson

⾃定义块表达式还有很多别的特性, ⽐如可以直接使⽤ IF 和 ELSE；

//代码如下：

Handlebars次级数据的渲染

Handlebars⽀持简单的下级对象获取和上级对象获取, 跟 Mustache⼀样样的.

{{name}}

Handlebars 也⽀持多层次的数据展⽰, 模版如下.

下⾯这个是要使⽤到的Handlebars的 数据;var context = {

title: \"My First Blog Post!\", author: { id: 47,

name: \"Yehuda Katz\" },

body: \"My first post. Wheeeee!\"};

代码如下：

Handlebars 可以迭代Object对象(纯对象或者数组); 在模版中的../是对象的⽗级;

Comments

下⾯展⽰的name都是同样的东西;

{{./name}} or {{this/name}} or {{this.name}}

Handlebars模版中的注释可以使⽤ {{!-- --}} 或者 {{! }}或者 .

可以把模版专⽤的注释写在模版⽂件⾥⾯么么哒. 提⾼代码的可读性, 这个也算是最佳实践吧;

{{!-- --}}和{{! }}的注释不会出现在⽣成的代码中; 如果使⽤ 注释的代码会出现在⽣成的代码中;

⾃定义标签(Helpers)

Handlebars的⾃定义标签可以使⽤在Handlebars模版的任何地⽅,必须使⽤ Handlebars.registerHelper注册到即可; 上代码:

这个是要⽤到的datavar context = {

author: {firstName: \"Alan\", lastName: \"Johnson\"}, body: \"I Love Handlebars\", comments: [{

author: {firstName: \"Yehuda\", lastName: \"Katz\"}, body: \"Me too!\" }]};

//就是下⾯这个helper提供了模版中的⾃定义标签;Handlebars.registerHelper('fullName', function(person) { return person.firstName + \" \" + person.lastName;});

⽣成的结果如下:

代码如下：

在⾃定义标签的Helper可以使⽤this, this是当前的对象;

{{#each items}}

• {{agree_button}}
{{/each}}

这个是填充的数据和定义的Helpers:var context = { items: [ {name: \"Handlebars\", emotion: \"love\"}, {name: \"Mustache\", emotion: \"enjoy\"}, {name: \"Ember\", emotion: \"want to learn\"} ]};Handlebars.registerHelper('agree_button', function() { var emotion = Handlebars.escapeExpression(this.emotion), name = Handlebars.escapeExpression(this.name); return new Handlebars.SafeString( \"I agree. I \" + emotion + \" \" + name + \"\" );});⽣成的结果如下:

• I agree. I love Handlebars
• I agree. I enjoy Mustache
• I agree. I want to learn Ember

如果你希望你返回的HTML代码不被转义, 就要在定义的Helper中返回 new Handlebars.SafeString; return new Handlebars.SafeString(代码)

⾃定义标签(Helpers)的更多信息;

Handlebars 提供 if 在模版中进⾏简单的逻辑处理; 以及迭代处理的标签 each .

//例⼦代码段:

//handlebars的IF ELSE语句和 each语句的例⼦: