Knockout应用开发指南之模板绑定

目的

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

例子

${ name } is ${ age } years old

Make older

var viewModel = {

name: ko.observable('Bert'),

age: ko.observable(78),

makeOlder: function () {

this.age(this.age() +1);

}

};

ko.applyBindings(viewModel);

当引用的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。

传递多个参数的例子：

因为在模板里使用的是data-bind属性来声明的，所以嵌套模板你可以再次使用data-bind='template: ...'，在上层模板的元素里。

这比模板引起的原生语法好用多了(例如jquery.tmpl里的{{tmpl}})。Knockout语法的好处在于可以在每层模板的跟着相关的依赖值，所以如果依赖改变了，KO将只会重新render依赖所在的那个模板。这将很大地改善了性能。

当你在模板内部使用data-bind属性的时候，KO是单独为这个绑定单独跟踪依赖项的。当model改变的时候，KO只会更新绑定的元素以及子元素而不需要重新render整个模板。所以如果你声明这样的代码是，当 someObservableValue改变的时候，KO将只是简单地更新元素的text值而不需要重新render整个模板。

不过，如果模板内部使用的observable值（例如${ someObservableValue }），如果这个observable值改变了，那KO将重新render整个模板。

这就是说，很多情况下性能要比${ someObservableValue }要好，因为值改变的话不会影响临近元素的状态。不过${ someObservableValue }语法比较简洁，如果你的模板比较小的话，还是更合适的，不会带来大的性能问题。

你可以使用模板引擎里的原生“each”语法，对jquery.tmpl来说就是用{{each}}语法迭代数组。

data: myData,
afterRender: myPostProcessingLogic }'>

viewModel.myPostProcessingLogic = function (elements) {
// "elements" is an array of DOM nodes just rendered by the template
// You can add custom post-processing logic here
}

foreach: employees }'>
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.

foreach: employees,
templateOptions: { label: "Employee:",
selectedPerson: selectedEmployee } }'>
${ $item.label }