KnockoutJS template用来定义模板，并将模版用在指定的DOM绑定中。template的用处显而易见，可以更加清晰的定义代码，并能够方便的复用这些代码。
示例代码：
<h2>Participants</h2>
Here are the participants:
<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'person-template', data: seller }"></div>
<script type="text/html" id="person-template">
<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>
</script>
<script type="text/javascript">
function MyViewModel() {
this.buyer = { name: 'Franklin', credits: 250 };
this.seller = { name: 'Mario', credits: 5800 };
}
ko.applyBindings(new MyViewModel());
</script> |
在这段代码中，我们定义了模板person-template，它所对应的html代码写在script标签中。在使用的时候，需要在元素中添加template绑定，指定name和data等参数。
template绑定的参数有：
name：template的名称，与模板script标签的id相对
data：绑定模板时的数据
if：只有当表达式为true的时候才绘制DOM节点
foreach：对于数组进行循环绘制DOM节点
as：为数据属性指定一个易于理解的名称
afterRender, afterAdd, beforeRemove：一些事件，用来监控绘制的过程
来看一个foreach的例子：
<h2>Participants</h2> Here are the participants: <div data-bind="template: { name: 'person-template', foreach: people }"></div> <script type="text/html" id="person-template"> <h3 data-bind="text: name"></h3> <p>Credits: <span data-bind="text: credits"></span></p> </script> function MyViewModel() { this.people = [ { name: 'Franklin', credits: 250 }, { name: 'Mario', credits: 5800 } ] } ko.applyBindings(new MyViewModel()); |