Question

我是淘汰赛的初学者并编写了一个示例应用程序，我必须在其中显示父子关系。

因此，我有两个foreach循环。其中一个是父母的迭代，另一个是每个父母的孩子。基本上nested foreach循环。但是当我使用嵌套循环时，数据不会被渲染。

以下是我的示例html，它不适用于Children循环：

<div class='liveExample'> 
  <div data-bind="foreach: items">
    <div class="parent" data-bind="text: Name">
      <div class="children" data-bind="foreach: Children">
        <div data-bind="text: Name"></div>
        <div data-bind="text: Age"></div>
      </div>
    </div>
  </div>
</div>

在找到类似的stackoverflow问题并根据提供的答案，我尝试使用 $ parent.Children 。但这也不适用于我的情况。

以下是JSFiddle Demo

观察：我对不工作的观察之一是因为foreach 在<div class="parent" data-bind="text: Name">标记
中定义

Answer 1

你的孩子在你正在使用text绑定的同一个元素中 - 这不起作用，因为该绑定将用它绑定的内容替换整个内容 - 在这种情况下父名称。这就是为什么你没有看到任何一个孩子 - 标记丢失了。

您需要将子项和父名称绑定远离彼此：

您可以将它们移出父div：

<div class='liveExample'> 
  <div data-bind="foreach: items">
    <div class="parent" data-bind="text: Name">
    </div>
    <div class="children" data-bind="foreach: Children">
      <div data-bind="text: Name"></div>
      <div data-bind="text: Age"></div>
    </div>
  </div>
</div>

或者您可以使用额外的范围来包含父名称：

<div class='liveExample'> 
  <div data-bind="foreach: items">
    <div class="parent">
      <span data-bind="text: Name"></span>
      <div class="children" data-bind="foreach: Children">
        <div data-bind="text: Name"></div>
        <div data-bind="text: Age"></div>
      </div>
    </div>
  </div>
</div>

或者根据需要保留层次结构的任何其他方法，只要具有text绑定的元素保持为空。

嵌套的foreach无法正常工作

1 个答案: