KnockoutJS 3.X API 第五章 template绑定

发布时间：2016-10-12 17:00:08

目的 template绑定(模板绑定)使用渲染模板的结果填充关联的DOM元素。模板是一种简单方便的方式来构建复杂的UI结构。下面介绍两种使用模板绑定的方法: 本地模板是支持foreach，if，with和其他控制流绑定的机制。在内部，这些控制流绑定捕获元素中包含的HTML ...

目的

template绑定(模板绑定)使用渲染模板的结果填充关联的DOM元素。模板是一种简单方便的方式来构建复杂的UI结构。

下面介绍两种使用模板绑定的方法:

本地模板是支持foreach，if，with和其他控制流绑定的机制。在内部，这些控制流绑定捕获元素中包含的HTML标记，并将其用作模板以针对任意数据项进行呈现。此功能内置在Knockout中，不需要任何外部库。

基于字符串的模板是一种将Knockout连接到第三方模板引擎的方法。 Knockout会将您的模型值传递给外部模板引擎，并将生成的标记字符串注入到文档中。请参阅下面的备注6使用jquery.tmpl和Underscore模板引擎的示例。

参数

快速语法：如果你只是提供一个字符串值，KO会将其解释为要渲染的模板的ID。它提供给模板的数据将是您当前的模型对象。

要获得更多控件，请传递具有以下属性的某些组合的JavaScript对象：

name — 包含要渲染的模板的元素的ID - 有关如何以编程方式更改此设置，请参见备注5。

nodes —直接传递DOM节点数组以用作模板。这应该是一个不可观察的数组，并注意元素将从他们当前的父（如果他们有一个）中删除。如果您还为name传递了一个非空值，则忽略此选项。

data — 要提供为要呈现的模板的数据的对象。如果省略此参数，KO将查找foreach参数，或者使用当前模型对象返回。

if — 如果提供此参数，那么只有在指定的表达式求值为true（或true-ish值）时，才会呈现模板。这可以有助于防止null observable在填充之前与模板绑定。

foreach — 指示KO以“foreach”模式渲染模板 - 有关详细信息，请参见备注2。

as — 当与foreach结合使用时，为正在呈现的每个项目定义别名 - 有关详细信息，请参见备注3。

afterRender, afterAdd, beforeRemove — 要针对呈现的DOM元素调用的回调函数 - 请参阅备注4

备注1：渲染命名模板

通常，当您使用控制流绑定（foreach，with，if等）时，不需要给您的模板命名：它们是由DOM元素内的标记隐式和匿名定义的。但是如果你想要，你可以将模板分解成一个单独的元素，然后通过名称引用它们：

Participants

Here are the participants:

源码：

<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>

源码：

<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> <script> function MyViewModel() {   this.people = [     { name: 'Franklin', credits: 250 },     { name: 'Mario', credits: 5800 }   ] } ko.applyBindings(new MyViewModel());</script>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com