Knockout應用開發指南之模板綁定
目的
template綁定通過模板將數據render到頁面。模板綁定對于構建嵌套結構的頁面非常方便。默認情況， Knockout用的是流行的jquery.tmpl模板引擎。使用它的話，需要在安裝頁面下載和引用jquery.tmpl和jQuery框架。或者你也可以集成其它的模板引擎(雖然需要了解Knockout 內部知識才行)。
例子
- <div data-bind='template: "personTemplate"'> </div>
- <script id='personTemplate' type='text/html'>
- ${ name } is ${ age } years old
- <button data-bind='click: makeOlder'>Make older</button>
- </script>
- <script type='text/javascript'>
- var viewModel = {
- name: ko.observable('Bert'),
- age: ko.observable(78),
- makeOlder: function () {
- this.age(this.age() +1);
- }
- };
- ko.applyBindings(viewModel);
- </script>
當引用的observable(dependent observable)數據改變的時候，Knockout會自動重新render模板。在這個例子里，每次點擊button的時候都會重新render模板。
語法
你可以使用任何你模板引擎支持的語法。jquery.tmpl執行如下語法：
◆ ${ someValue } — 參考文檔
◆ {{html someValue}} — 參考文檔
◆ {{if someCondition}} — 參考文檔
◆ {{else someCondition}} — 參考文檔
◆ {{each someArray}} — 參考文檔
和observable數組一起使用{{each}}
當然使用{{each someArray}}的時候，如果你的值是observableArray，你必須使用JavaScript類型的基礎數組類型{{each myObservableArray()}}，而不是{{each myObservableArray}}。
參數
主參數
語法快速記憶：如果你聲明的僅僅是字符串(上個例子)，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。
傳遞多個參數的例子：
- <div data-bind='template: { name: "personTemplate", data: someObject }'> </div>
注1：Render嵌套模板
因為在模板里使用的是data-bind屬性來聲明的，所以嵌套模板你可以再次使用data-bind='template: ...'，在上層模板的元素里。
這比模板引起的原生語法好用多了(例如jquery.tmpl里的{{tmpl}})。Knockout語法的好處在于可以在每層模板的跟著相關的依賴值，所以如果依賴改變了，KO將只會重新render依賴所在的那個模板。這將很大地改善了性能。
注2：${ val }和<span data-bind='text: val'></span>有何不同？
當你在模板內部使用data-bind屬性的時候，KO是單獨為這個綁定單獨跟蹤依賴項的。當model改變的時候，KO只會更新綁定的元素以及子元素而不需要重新render整個模板。所以如果你聲明這樣的代碼是<span data-bind='text: someObservableValue'></span>，當 someObservableValue改變的時候，KO將只是簡單地更新<span>元素的text值而不需要重新render整個模板。
不過，如果模板內部使用的observable值（例如${ someObservableValue }），如果這個observable值改變了，那KO將重新render整個模板。
這就是說，很多情況下<span data-bind='text: someObservableValue'></span>性能要比${ someObservableValue }要好，因為值改變的話不會影響臨近元素的狀態。不過${ someObservableValue }語法比較簡潔，如果你的模板比較小的話，還是更合適的，不會帶來大的性能問題。
注3：使用foreach
如果需要為集合里的每一個item render一次模板，有2種方式：
你可以使用模板引擎里的原生“each”語法，對jquery.tmpl來說就是用{{each}}語法迭代數組。
另外一種方式就是用Knockout的foreach模式來render。
例子：
- <div data-bind='template: { name: "personTemplate",
- foreach: someObservableArrayOfPeople }'> </div>
foreach模板模式的好處是：
◆ 當往你的collection集合里添加新item項的時候，KO只會對這個新item進行render模板，并且將結果附加到現有的DOM上。
◆ 當從collection集合里刪除item的時候，KO將不會重新render任何模板，而只是簡單地刪除相關的元素。
◆ KO允許通過自定義的方式聲明afterAdd和beforeRemove的callback函數添加/刪除DOM元素。然后這個callback會在刪除元素的時候進行一些動畫或者其它操作。
與原生的each不同之處是：在改變之后，模板引擎強制重新render模板里所有的內容，因為它根本就不關注KO里所謂的依賴跟蹤內容。
關于使用foreach模式的例子，參考grid editor和animated transitions。
注4：使用afterRender選項
有時候，你需要在模板生成的DOM元素上深度定義邏輯。例如，你可能想再模板輸出的時候進行截獲，然后在render的元素上允許jQuery UI命令（比如date picker，slider，或其它）。
你可以使用afterRender選項，簡單聲明一個function函數（匿名函數或者view model里的函數），在render或者重新render模板之后Knockout會重新調用它。如果你使用的是foreach，那在每個item添加到observable數組之后， Knockout會立即調用afterRender的callback函數。例如，
- <div data-bind='template: { name: "personTemplate",
- data: myData,
- afterRender: myPostProcessingLogic }'> </div>
… 在view model里聲明一個類似的函數（例如，對象包含myData）：
- viewModel.myPostProcessingLogic = function (elements) {
- // "elements" is an array of DOM nodes just rendered by the template
- // You can add custom post-processing logic here
- }
注5：動態決定使用哪個模板
有時候，你可能需要根據數據的狀態來決定使用哪個模板的ID。可以通過function的返回ID應用到name選擇上。如果你用的是foreach模板模式， Knockout會對每個item執行function（將item作為參數）從而將返回值作為ID，否則，該function接受的參數是整個 data option或者是整個view model。
例子：
- <ul data-bind='template: { name: displayMode,
- foreach: employees }'> </ul>
- <script type='text/javascript'>
- 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) {
- return employee.active() ?"active" : "inactive";
- // Initially "Kari" uses the "active" template, while the others use "inactive"
- }
- };
- // ... then later ...
- viewModel.employees()[1].active(true);
- // Now "Brynn" is also rendered using the "active" template.
- </script>
如果你的function引用的是observable值，那當這些值改變的時候，綁定的值會隨著改變的。這將導致相應的模板重新render。
注6：使用templateOptions傳遞額外的參數
如果你在綁定模板的時候需要傳入額外的數據的話，你可以使用templateOptions對象來傳遞這些值。這可以幫助你通過一些 不屬于view model過濾條件或者字符來重用模板。另外一個好處是用在范圍控制，你可以引用通過你的模板訪問怒道的數據。
例子，
- <ul data-bind='template: { name: "personTemplate",
- foreach: employees,
- templateOptions: { label: "Employee:",
- selectedPerson: selectedEmployee } }'> </ul>
- <script id='personTemplate' type='text/html'>
- <div data-bind="css: { selected: $data === $item.selectedPerson()" }">
- ${ $item.label } <input data-bind="value: name" />
- </div>
- </script>
在整個例子里，personTemplate有可能都使用employee和自定義對象。通過templateOptions我們可以傳遞一個字符label和當前已選擇項作為selectedPerson來控制style。在jquery.tmpl模板里，這些值可以通過訪問$item對象的屬性得到。
注7：模板是被預編譯和緩存的
為了***性能，Knockout內嵌模板引擎jquery.tmpl會利用自身的功能對你的模板進行預編譯成可執行的JavaScript代碼，然后從編譯流程里緩存輸出。這將使模板更快更加具有可執行性，尤其是是使用foreach循環來render相同模板的時候。
一般情況你不會注意到這個，所以經常會忘記。不過，當你在某種原因下通過編程重寫模板<script>元素的時候并且該模板之前已經用過一次的話，你的改變不會帶來任何render的變化，因為在***次使用的時候已經預編譯了并且緩存起來了。（如果這些會帶來問題，我們將考慮在KO新版本里提供一個禁用或重設模板緩存的功能，不過好像沒有好的原因去動態改變模板<script>元素的內容）。
注8：使用不同的模板引擎
如果你想使用不同的JavaScript模板引擎（或者是因為某些原因你不想在jQuery上使用依賴）。我們可以去為KO來寫一個不同的模板引擎，例如,在KO源代碼里的jqueryTmplTemplateEngine.js,盡管他是為了支持多個版本的jquery.tmpl而編譯。支持一個單獨的模板引擎版本相對簡單多了。
依賴性
template綁定只能在引用合適的模板引擎情況下才能工作。例如提到的jquery.tmpl引擎。
【系列文章】
