Knockoutjs屬性綁定(Bindings)之模板綁定(template binding)

關於Knockoutjs屬性綁定的內容我們基本上已經介紹完了，最后我們再介紹一下屬性綁定的最后一個模塊，那就是模板綁定(template binding)。我們使用模板綁定的目的就是可以將復雜的頁面通過各個模板為我們分別實現，當我們使用這些模板的使用通過模板綁定即可使用，這樣對我們頁面的編寫也是十分方便的，我們使用模板的情況大多是內容是重復性的或者是分塊嵌套的，這樣對View Model層的數據展示就非常的方便。

下面我們就借助幾個例子看看怎樣使用模板綁定。

（1）、使用name來render模板

<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的值確保了此標簽不會作為JavaScript代碼執行，而是作為一段HTML代碼來執行。

（2）、使用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());

這里我們使用的是foreach來調用我們的模板，此時只使用了一次我們的person-template模板，這段代碼和下面的代碼所實現的功能是一樣的：

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

（3）、我們也可以為foreach所循環的元素定義一個別名，我們使用as為其定義別名。如下：

<ul data-bind="template: { name: 'employeeTemplate',
                                  foreach: employees,
                                  as: 'employee' }"></ul>

這里我們定義別名的目的就是在多層嵌套中可以很方便的使用上層循環中的內容，我們在之前講解foreach的時候曾經提到了使用$parent來調用上層循環中的內容，這里我們使用as為foreach中的循環元素起了個別名，這樣我們就可以使用這個別名來訪問其中的內容了，如下例子：

<ul data-bind="template: { name: 'seasonTemplate', foreach: seasons, as: 'season' }"></ul>
 
<script type="text/html" id="seasonTemplate">
    <li>
        <strong data-bind="text: name"></strong>
        <ul data-bind="template: { name: 'monthTemplate', foreach: months, as: 'month' }"></ul>
    </li>
</script>
 
<script type="text/html" id="monthTemplate">
    <li>
        <span data-bind="text: month"></span>
        is in
        <span data-bind="text: season.name"></span>
    </li>
</script>
 
<script>
    var viewModel = {
        seasons: ko.observableArray([
            { name: 'Spring', months: [ 'March', 'April', 'May' ] },
            { name: 'Summer', months: [ 'June', 'July', 'August' ] },
            { name: 'Autumn', months: [ 'September', 'October', 'November' ] },
            { name: 'Winter', months: [ 'December', 'January', 'February' ] }
        ])
    };
    ko.applyBindings(viewModel);
</script>

上例中我們分別為seasons、months起名為season、month，這樣我們在引用monthTemplate模板時我們就可以使用season.name來引用seasonTemplate模板中的season的信息了。

（4）、動態選擇模板

有的時候我們可能有多個模板，此時我們就可以使用一個回調函數來決定使用哪一個模板，比如：

<ul data-bind='template: { name: displayMode,
                           foreach: employees }'> </ul>
 
<script>
    var viewModel = {
        employees: ko.observableArray([
            { name: "Kari", active: ko.observable(true) },
            { name: "Brynn", active: ko.observable(false) },
            { name: "Nora", active: ko.observable(false) }
        ]),
        displayMode: function(employee) {
            // Initially "Kari" uses the "active" template, while the others use "inactive"
            return employee.active() ? "active" : "inactive";
        }
    };
 
    // ... then later ...
    viewModel.employees()[1].active(true); // Now "Brynn" is also rendered using the "active" template.
</script>

如果你的函數引用的是可見值，則這些值改變時，你的模板綁定的值也會改變，並會重新加載模板。

（5）、我們也可以在Knockoutjs中使用其他的模板引擎，比如jQuery.tmpl等。

我們這里以使用jQuery.tmpl為例，如果我們要使用jQuery.tmpl模板引擎的話，我們首先要先引用下面的一些js，代碼如下：

<!-- First jQuery -->     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- Then jQuery.tmpl --> <script src="http://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<!-- Then Knockout -->    <script src="knockout-x.y.z.js"></script>

然后我們就可以使用jQuery.tmpl的規則去編寫代碼了，如下：

<h1>People</h1>
<div data-bind="template: 'peopleList'"></div>
 
<script type="text/html" id="peopleList">
    {{each people}}
        <p>
            <b>${name}</b> is ${age} years old
        </p>
    {{/each}}
</script>
 
<script type="text/javascript">
    var viewModel = {
        people: ko.observableArray([
            { name: 'Rod', age: 123 },
            { name: 'Jane', age: 125 },
        ])
    }
    ko.applyBindings(viewModel);
</script>

在這里我們使用的{{each ...}}和${...}都是jQuery.tmpl的語法規則，並且我們可以使用data-bind="template:..."去加載這個模板。