knockoutjs2-0渲染模板.docxVIP

在“模板”具有约束力 目的 template绑定填充渲染模板的结果关联的DOM元素。 模板是一个简单方便的方式来构建复杂的用户界面结构 - 可能有重复或嵌套块 - 为您的视图模型数据的功能。 使用模板有两个主要途径： 本地模板是一种机制，巩固foreach ， if ， with和其他控制流绑定。 这些控制流绑定内部，捕捉你的元素中的HTML标记，并以此为模板，以使对任意数据项目。 此功能内置到淘汰赛，不需要任何外部库。 基于字符串的模板是一种连接第三方模板引擎的淘汰赛。 淘汰赛将通过模型值，外部的模板引擎，并注入您的文档生成的标记字符串。 看到下面的例子使用的jquery.tmpl和下划线的模板引擎。 参数 主要技术参数 速记语法：如果你只是提供一个字符串值，正将其解释为一个模板来呈现的ID。 它提供的模板中的数据将是您目前的模型对象。 对于更多的控制，通过一个JavaScript对象具有以下属性的某种组合： name -一个元素，它包含你想呈现的模板的ID -见注4，如何改变这种编程。 data -对象提供的模板来呈现数据。 如果省略此参数，正将寻找foreach foreach参数，或将要使用您当前的模型对象。 foreach -指示正呈现模板中的“foreach”模式-见注2详情。 afterRender ， afterAdd ，或beforeRemove -要对所呈现的DOM元素调用的回调函数-见注3注1：渲染一个命名模板 通常情况下，当你使用控制流绑定（ foreach ， withif等），有没有必要给你的模板的名称：定义它们的隐式和匿名内部的DOM元素的标记。 但是，如果你想，你可以分解成一个单独的元素的模板，然后按名称引用它们： h2Participants/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/htmlid=person-template h3 data-bind=text: name/h3 pCredits: span data-bind=text: credits/span/p /script script type=text/javascript functionMyViewModel() { this.buyer = { name: Franklin, credits: 250 }; this.seller = { name: Mario, credits: 5800 }; } ko.applyBindings(newMyViewModel()); /script在这个例子中， person-template标记被使用了两次：一次buyer ，一次为seller 。 请注意，被包裹在一个模板标记script type=text/html -假人type属性是必要的，以确保不执行的JavaScript标记，淘汰赛不尝试申请，除非该标记的绑定它被用来作为模板。 这是不是很经常，你需要使用命名模板，但有时它可以帮助，以减少重复的标记。 注2：使用命名模板的“foreach”选项 如果你想foreach相当于一个具有约束力，但使用一个命名模板，你可以这样做，在自然的方式： h2Participants/h2 Here are the participants: div data-bind=template: { name: person-template, foreach: people }/div script type=text/htmlid=person-template h3 data-bind=text: name/h3 pCredits: span data-bind=text: credits/span/p /script functionMyViewModel() { this.people = [ { name: Franklin, credits: 250 }, { name: Mario, credits: 5800 } ] } ko.applyBindings(newMyViewModel());这给人foreach ，即直接使用里面的元素嵌入一个匿名模板相同的结果： div data-bind=foreach: people h3 data-bind=text: name/h3 pCredits: span data-bind=text: credits/spa