评论敲除js中的foreach绑定与foreach绑定答案

【问题标题】：comment foreach binding vs foreach binding in knockoutjs评论敲除js中的foreach绑定与foreach绑定
【发布时间】：2013-06-08 17:14:47
【问题描述】：

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

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

对

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

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

【问题讨论】：

您确定要使用“更好”这个词吗？这将使这个问题更接近“主观”。
Read Note 4
感谢现在我为自己的提问加速了 2000 多分：P

标签： javascript knockout.js templating knockout-templating

【解决方案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>

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

【讨论】：

我要补充一点，无容器绑定是在以下情况下的最佳解决方案：根据 HTML 规范，您可以实际添加到给定容器中的元素受到限制。例如，您有一个带有静态行的 tbody，然后是一个表示动态行的可观察数组，但 tbody 的唯一有效子元素是 tr 元素。

【解决方案2】：

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

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

The "foreach" binding, Note 4: Using foreach without a container element上的模式详情

【讨论】：