WeX5数据绑定:template用法
优质
小牛编辑
129浏览
2023-12-01
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等,这里不做讲解。