Question

我已经看到了两种在淘汰赛中使用模板的方法：

<ul data-bind="template: {name: 'templateName', foreach: tags}"></ul>
<script id="templateName" type="text/html">
    <li class="tagItem"><span data-bind="text: name"></span></li>
</script>

control flow binding：

<ul data-bind="foreach: tags">
    <li class="tagItem"><span data-bind="text: name"></span></li>
</ul>

两者都具有相同的ViewModel：

var viewModel = {
  tags : ko.observableArray([{name: 'tag1'}, {name: 'tag2'}])
}

据我所知，结果是一样的，但第二个是

写得更短
没有这个奇怪的脚本标记
不会分散到不同的地方
更容易理解

那么第一种情况的原因是什么？（我现在唯一看到的就是将它与其他文件分开）。

Answer 1

在我看来，第一个案例的重大优点是可重用性。

想象一下，你想在一些页面中插入这样的列表，它们在所有页面中看起来都一样。你会采用第二种方式并一遍又一遍地复制粘贴此代码吗？我不这么认为。您希望在单独的文件中构建模板，并通过data-bind引用它。

此外，您可以动态移交您在使用data-bind="template: {name: 'templateName', foreach: tags}"时要迭代的任何数组，因此第二个加号应该是灵活性。

为了详细阐述这一点，请进一步思考下面的例子。使用没有模板的简单绑定意味着您必须在必要时编写HTML plus JavaScript绑定代码：

var viewModel = {
  tags : ko.observableArray([{name: 'tag1'}, {name: 'tag2'}])
}

对于模板，这更容易，因为您只需要在模板中定义要选择的数组：

<ul data-bind="template: {name: 'templateName', foreach: tags}"></ul>
<ul data-bind="template: {name: 'templateName', foreach: news}"></ul>

这将为不同的数组呈现两个列表。优点是您可以保存编写JavaScript绑定代码以及重复的HTML。我的灵活性意味着我们可以对不包含标签的数组使用相同的代码。唯一的限制是这些数组还包含具有name-property的对象。

敲除模板绑定和控制流绑定之间的区别

1 个答案: