第四节：模板绑定.pdfVIP

第四章：模板绑定 模板绑定The template binding ⽬的 template绑定通过模板将数据render到页⾯。模板绑定对于构建嵌套结构的页⾯⾮常⽅ 便。默认情况， Knockout⽤的 流⾏的jquery .tmpl模板引擎。使⽤它的话，需要在安 装页⾯下载和引⽤jquery .tmpl和j Query框架。或者你也可以集成其它的模板引擎 （虽 然需要了解Knockout 内部知识才⾏）。 例⼦ div data-bind=template: personTemplate /div script id=personTemplate type=text/html ${ name } is ${ a e } years old button data-bind=click: makeOlderMake older/button /script script type=text/javascript var viewModel = { name: ko.observable(Bert), a e: ko.observable(78), makeOlder: function () { this.a e(this.a e() +1); } }; ko.applyBindin s(viewModel); /script 当引⽤的observable （dependent observable ）数据改变的时候，Knockout会⾃动重新 render模板。在这个例⼦⾥，每次点击button的时候都会重新render模板。 语法 你可以使⽤任何你模板引擎⽀持的语法。jquery .tmpl执⾏如下语法： ${ someValue } — 参考⽂档 {{html someValue}} — 参考⽂档 {{if some ondition}} — 参考⽂档 {{else some ondition}} — 参考⽂档 {{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: someObje 注1 ：Render嵌套模板 因为在模板⾥使⽤的 data-bind属性来声明的，所以嵌套模板你可以再次使⽤data- bind=template: ... ，在上层模板的元素⾥。 这⽐模板引起的原⽣语法好⽤多了 （例如jquery .tmpl⾥的{{tmpl}}）。Knockout语法的 好处在于可以在每层模板的跟着相关的依赖值，所以如果依赖改变了，KO将只会重 新render依赖所在的那个模板。这将很⼤地改善了性能。 注2 ：${ val }和有