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