Handlebars js模版

参考Handlebars网站：http://handlebarsjs.com/

首先下载handlebars-1.0.0.beta.6.js和jquery-1.7.1.min.js

1）、最简单的Handlebars模版使用。

首先创建handlebarExample.html。

添加js库：

添加handlebars模版：

添加读取js函数：

执行结果如下：

 
标题
 

 内容
 

上面是一个最简单的Handlebars模版应用，其中template(context)是生成相应的html节点，并且添加到页面上。其中context可以添加相应的标签。

2)Block expressions使用方法

可以自定义模版标签，利用helper生成相应的html代码：

首先修改模版：

修改context和渲染成html

生成的代码效果如下：

• Yehuda Katz
• Carl Lerche
• Alan Johnson

添加一个名叫list的helper，funcitons(items, options)传入两个参数, data中的people作为第一个参数传入，options作为第二个参数传入，options附带属性fn，使用fn可以调用该模块的内容。

 

3）、With Expressions 使用方法

直接添加模版并且生成节点，添加到页面。

var source = "
{{lastName}}, {{firstName}}
";
 var template = Handlebars.compile(source);
 var html =template({firstName: "Alan", lastName: "Johnson"});

添加模版：

添加模版数据内容：

其中使用with标签可以访问数据结构中的author对象中的相应元素。在实际的编程中，这一点非常有用，因为数据的不同对象需要展示到相同的页面上。所以with标签非常有用。

4）、Each helpers 用法

可以利用each标签，循环数据。

添加模版：

实现数据添加和展示：

显示的结果：

• Yehuda Katz
• Alan Johnson
• Charles Jolley

5）、if helpers 用法

使用if模块，可以实现想用的逻辑。

模版：

 {{#if author}}
 
{{firstName}} {{lastName}}
 {{else}}
 
Unknown Author
 {{/if}}
 

添加数据：

由于数据为空，直接显示Unknown Author。

6）、Handlebars Paths

Handlebars数据也支持相应的路径。

模版：

  
{{title}}
  
By {{author.name}}

  

    {{body}}
  

相应的数据：

其中

By {{author.name}}

可以显示author对象中的name。

7）、使用Helpers

用户自定义helpers。

模版：

数据：

其中利用help实现了fullName标签。

 原文地址：http://wangjun.easymorse.com/?p=1704