template用来定义模板，并将模版用在指定的DOM绑定中。template的用处显而易见，可以更加清晰的定义代码，并能够方便的复用这些代码。

示例代码：

//.W片段
<h2>Participants</h2>
Here are the participants:
<div bind-template="{ name: 'person-template', data: buyer }"></div>
<div bind-template="{ name: 'person-template', data: seller }"></div>

<script type="text/html" id="person-template">
 <h3 bind-text="name"></h3>
 <p>Credits: <span bind-text="credits"></span></p>
</script>

//.js片段
this.buyer = { name: 'Franklin', credits: 250 };
this.seller = { name: 'Mario', credits: 5800 };

在这段代码中，我们定义了模板person-template，它所对应的html代码写在script标签中。在使用的时候，需要在元素中添加template绑定，指定name和data等参数。

template绑定的参数有：

  • name：template的名称，与模板script标签的id相对
  • data：绑定模板时的数据
  • if：只有当表达式为true的时候才绘制DOM节点
  • foreach：对于数组进行循环绘制DOM节点
  • as：为数据属性指定一个易于理解的名称
  • afterRender, afterAdd, beforeRemove：一些事件，用来监控绘制的过程

来看一个foreach的例子：

//.W片段
<h2>Participants</h2>
Here are the participants:
<div bind-template="{ name: 'person-template', foreach: people }"></div>

<script type="text/html" id="person-template">
 <h3 bind-text="name"></h3>
 <p>Credits: <span bind-text="credits"></span></p>
</script>

//.js片段
this.people = [
 { name: 'Franklin', credits: 250 },
 { name: 'Mario', credits: 5800 }
 ]

除了使用这种方法完成模板绑定之外，还支持第三方的模板引擎将字符串转换成html，例如使用underscore、jQuery.tmpl等，这里不做讲解。

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443