javascript - 评论敲除js中的foreach绑定与foreach绑定

Question

在我的 HTML 中，我可以定义这些淘汰赛 foreach 绑定：

<!-- ko foreach: customer -->
   <div data-bind="text: id" />
<!-- /ko -->

对比

<div data-bind="foreach: customer">
    <div data-bind="text: id" />
</div>

这两种方法的区别在哪里？

Answer 1

当绑定部分中存在父子关系时使用本机绑定，例如 ul 和 li。

当您的绑定部分没有父子关系时，请使用无容器绑定的注释语法。

在您的示例中，您使用第一个代码块，因为您没有尝试绑定到父子结构。您要做的只是将您的客户数据绑定到一个 div，您不必创建父 div 并foreach通过客户并在父 div 内附加另一个 div。这比你想做的要多。

善用无容器绑定

<!-- ko foreach: customer -->
<section>
   <p data-bind="text: customer.name"></p>
   <p data-bind="text: customer.orderDate"></p>
</section>
<!-- /ko -->

但是，如果您有一个有序列表，则应该使用本机绑定，因为它才有意义。

本国的

<ol data-bind="foreach: customer">
   <li data-bind="text: customer.name"></li>
</ol>

无容器

<ol> 
   <!-- ko foreach: customer -->
       <li data-bind="text: customer.name"></li>
   <!-- /ko -->
</ol>

第二个例子看起来很傻。您正在为不应该复杂的事情增加更多的复杂性。

Answer 2

在某些情况下，您可能想要复制一段标记，但您没有任何容器元素可以放置 foreach 绑定

要处理这个问题，您可以使用基于注释标签的无容器控制流语法

“foreach”绑定的模式详细信息，注 4：在没有容器元素的情况下使用 foreach