javascript - 在 knockoutjs 中评论 foreach 绑定(bind)与 foreach 绑定(bind)

Question

在我的 HTML 中，我可以定义这些删除 foreach 绑定(bind):

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

对比

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

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

Answer 1

当绑定(bind)部分中存在父子关系时使用 native 绑定(bind)，例如 ul 和 li。

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

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

善用无容器绑定(bind)

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

但是，如果您有一个有序列表，您应该使用 native 绑定(bind)，因为它很有意义。

原生

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

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