Question

在我的HTML中，我可以定义这些敲除的foreach绑定：

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

VS

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

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

The "foreach" binding, Note 4: Using foreach without a container element

的模式详情

在knockoutjs评论foreach绑定vs foreach绑定

2 个答案: