KnockoutJS 模板
Template 是一组可以重复使用的 DOM 元素。模板化具有最大限度地减少 DOM 元素重复的特性，因此可以轻松构建复杂的应用程序。
有两种创建模板的方法。
Native 模板-此方法支持控制流绑定，例如 foreach、with 和 if。这些绑定捕获元素中存在的 HTML 标记，并将其用作随机项目的模板。此模板不需要外部库。
基于字符串的模板-KO 连接到第三方引擎以将 ViewModel 值传递给它并将结果标记注入文档。例如，JQuery.tmpl 和 Underscore 引擎。
语法
template: <parameter-value>
<script type = "text/html" id = "template-name">
...
... // DOM elemets to be processed
...
</script>
请注意，
type 在脚本块中以
text/html 的形式提供，以通知 KO，它不是一个可执行块，而只是一个模板块，需要呈现。
参数
以下属性的组合可以作为参数值发送到模板。
name-这表示模板的名称。
nodes-这表示用作模板的 DOM 节点数组。如果传递 name 参数，则忽略此参数。
data-这只不过是要通过模板显示的数据。
if-如果给定条件的结果为 true 或类似 true 的值，则将提供模板。
foreach-以 foreach 格式提供模板。
as-这只是为了在 foreach 元素中创建别名。
afterAdd、afterRender、beforeRemove-这些都表示要根据执行的操作执行的可调用函数。
观察
渲染命名模板
模板在与控制流绑定一起使用时由 DOM 内的 HTML 标记隐式定义。但是，如果您愿意，您可以将模板分解为一个单独的元素，然后按名称引用它们。
示例
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating-Named Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<div data-bind = "template: { name: 'friend-template', data: friend1 }"></div>
<div data-bind = "template: { name: 'friend-template', data: friend2 }"></div>
<script type = "text/html" id = "friend-template">
<h3 data-bind = "text: name"></h3>
<p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
<p>Email-id: <span data-bind = "text: email"></span></p>
</script>
<script type = "text/javascript">
function MyViewModel() {
this.friend1 = {
name: 'Smith',
contactNumber: 4556750345,
email: 'smith123@gmail.com'
};
this.friend2 = {
name: 'Jack',
contactNumber: 6789358001,
email: 'jack123@yahoo.com'
};
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出
让我们执行以下步骤来看看上面的代码是如何工作的-
将上述代码保存在 template-named.htm 文件中。
在浏览器中打开此 HTML 文件。
这里使用了两次朋友模板。
在模板中使用"foreach"
以下是使用
foreach 参数和模板名称的示例。
示例
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating-foreach used with Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<div data-bind = "template: { name: 'friend-template', foreach: friends }"></div>
<script type = "text/html" id = "friend-template">
<h3 data-bind = "text: name"></h3>
<p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
<p>Email-id: <span data-bind = "text: email"></span></p>
</script>
<script type = "text/javascript">
function MyViewModel() {
this.friends = [
{ name: 'Smith', contactNumber: 4556750345, email: 'smith123@gmail.com' },
{ name: 'Jack', contactNumber: 6789358001, email: 'jack123@yahoo.com' },
{ name: 'Lisa', contactNumber: 4567893131, email: 'lisa343@yahoo.com' }
]
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出
让我们执行以下步骤来看看上面的代码是如何工作的-
将上述代码保存在 template-foreach.htm 文件中。
在浏览器中打开此 HTML 文件。
此处，foreach 控件用于模板绑定。
创建别名作为 foreach 项目的关键字
以下是如何为 foreach 项目创建别名-
<div data-bind = "template: {
name: 'friend-template',
foreach: friends,
as: 'frnz'
}"></div>
通过创建别名可以很容易地从 foreach 循环内部引用父对象。当代码复杂且嵌套在多个级别时，此功能很有用。
示例
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating-using alias in Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<ul data-bind = "template: {
name: 'friend-template',
foreach: friends,
as: 'frnz'
}"></ul>
<script type = "text/html" id = "friend-template">
<li>
<h3 data-bind = "text: name"></h3>
<span>Contact Numbers</span>
<ul data-bind = "template: {
name : 'contacts-template',
foreach:contactNumber,
as: 'cont'
} "></ul>
<p>Email-id: <span data-bind = "text: email"></span></p>
</li>
</script>
<script type = "text/html" id = "contacts-template">
<li>
<p><span data-bind = "text: cont"></span></p>
</li>
</script>
<script type = "text/javascript">
function MyViewModel() {
this.friends = ko.observableArray ( [
{
name: 'Smith',
contactNumber: [ 4556750345, 4356787934 ],
email: 'smith123@gmail.com'
},
{
name: 'Jack',
contactNumber: [ 6789358001, 3456895445 ],
email: 'jack123@yahoo.com'
},
{
name: 'Lisa',
contactNumber: [ 4567893131, 9876456783, 1349873445 ],
email: 'lisa343@yahoo.com'
}
]);
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出
让我们执行以下步骤来看看上面的代码是如何工作的-
将上述代码保存在 template-as-alias.htm 文件中。
在浏览器中打开此 HTML 文件。
使用别名代替数组的全名。
使用 afterAdd、beforeRemove 和 afterRender
在某些情况下，需要在模板创建的 DOM 元素上运行额外的自定义逻辑。在这种情况下，可以使用以下回调。考虑到您正在使用 foreach 元素-
afterAdd-当一个新项目被添加到 foreach 中提到的数组时调用这个函数。
beforeRemove-在从 foreach 中提到的数组中删除项目之前调用此函数。
afterRender-每次渲染 foreach 并将新条目添加到数组时都会调用这里提到的函数。
示例
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating-Use of afterRender Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
<script src = "https://code.jquery.com/jquery-2.1.3.min.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<div data-bind = "template: {
name: 'friend-template',
foreach: friends ,
afterRender: afterProcess
}"></div>
<script type = "text/html" id = "friend-template">
<h3 data-bind = "text: name"></h3>
<p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
<p>Email-id: <span data-bind = "text: email"></span></p>
<button data-bind = "click: $root.removeContact">remove </button>
</script>
<script type = "text/javascript">
function MyViewModel() {
self = this;
this.friends = ko.observableArray ([
{ name: 'Smith', contactNumber: 4556750345, email: 'smith123@gmail.com' },
{ name: 'Jack', contactNumber: 6789358001, email: 'jack123@yahoo.com' },
])
this.afterProcess = function(elements, data){
$(elements).css({color: 'magenta' });
}
self.removeContact = function() {
self.friends.remove(this);
}
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出
让我们执行以下步骤来看看上面的代码是如何工作的-
将上述代码保存在 template-afterrender.htm 文件中。
在浏览器中打开此 HTML 文件。
此处，每次渲染 foreach 时都会执行 afterProcess 函数。
动态选择模板
如果有多个模板可用，则可以通过将名称设为
observable 参数来动态选择一个。因此，模板值将随着 name 参数的更改而重新评估，进而数据将重新呈现。
示例
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating-Dynamic Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<div data-bind = "template: {
name: whichTemplate,
foreach: friends
}"></div>
<script type = "text/html" id = "only-phon">
<h3 data-bind = "text: name"></h3>
<p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
</script>
<script type = "text/html" id = "only-email">
<h3 data-bind = "text: name"></h3>
<p>Email-id: <span data-bind = "text: email"></span></p>
</script>
<script type = "text/javascript">
function MyViewModel() {
this.friends = ko.observableArray ([
{
name: 'Smith',
contactNumber: 4556750345,
email: 'smith123@gmail.com',
active: ko.observable(true)
},
{
name: 'Jack',
contactNumber: 6789358001,
email: 'jack123@yahoo.com',
active: ko.observable(false)
},
]);
this.whichTemplate = function(friends) {
return friends.active() ? "only-phon" : "only-email";
}
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出
让我们执行以下步骤来看看上面的代码是如何工作的-
将上述代码保存在 template-dynamic.htm 文件中。
在浏览器中打开此 HTML 文件。
要使用的模板取决于活动标志值。
使用基于外部字符串的引擎
原生模板与各种控制流元素完美配合，即使是嵌套代码块也是如此。 KO 还提供了一种与外部模板库（例如 Underscore 模板引擎或 JQuery.tmpl）集成的方法。
如官方网站所述，自 2011 年 12 月以来，JQuery.tmpl 不再处于积极开发状态。因此，仅推荐使用 KO 的原生模板，而不是 JQuery.tmpl 或任何其他基于字符串的模板引擎。
请参阅官方网站了解更多详情.
