（五）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>