（五）Knockout template模版渲染

基础

template绑定通过模板将数据render到页面。模板绑定对于构建嵌套结构的页面非常方便。默认情况， Knockout用的是流行的jquery.tmpl模板引擎。使用它的话，需要在安装页面下载和引用jquery.tmpl和jQuery框架。或者你也可以集成其它的模板引擎（虽然需要了解Knockout 内部知识才行）。

参数

主参数

• 语法快速记忆：如果你声明的仅仅是字符串（上个例子），KO会使用模板的ID来render。应用在模板上的数据是你的整个view model对象（例如ko.applyBindings 绑定的对象）。

• 更多控件，你可以传带有如下属性的JavaScript对象：

  • name（必选项） — 需要render的模板ID – 参考 注5 如何使用function函数声明ID。

  • data（可选项） — 需要render到模板的数据。如果你忽略整个参数，KO将查找foreach参数，或者是应用整个view model对象。

  • foreach（可选项） — 指定KO按照“foreach”模式render模板 – 参考 注3。

  • afterAdd或beforeRemove（可选项） — 在foreach模式下使用callback函数。

  • templateOptions（可选项） — 在render模板的时候，传递额外数据以便使用。参考 注6。

1.绘制一个命名模板

通常, 当您使用控制流绑定 (foreach, with, if 等) 时, 不需要为模板命名: 它们是由 dom 元素中的标记以隐式和匿名方式定义的。但是, 如果需要, 可以将模板分解为一个单独的元素, 然后按名称引用它们:

   <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标记被使用两次 ： 一次用于buyer一次 ， 和seller。注意 ， 模板标记包裹在<script type="text/html">— —type="text/html"属性是必需的, 以确保标记不会以 javascript 的形式执行, 并且出于将绑定应用于该标记, 除非它用作模板。

2. 使用foreach

如果需要为集合里的每一个item render一次模板：

<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>

<script>
  function MyViewModel() {
    this.people = [
      { name: 'Franklin', credits: 250 },
      { name: 'Mario', credits: 5800 }
    ]
  }
  ko.applyBindings(new MyViewModel());
</script>

使用foreach，这提供了与直接在每个元素中嵌入匿名模板相同的结果, 即:

<div data-bind="foreach: people">
    <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>
</div>