Knockout.js 嵌套的foreach不工作

我是敲除和编写示例应用程序的初学者，我必须在其中显示父子关系

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

下面是我的示例html，它不适用于

子对象
循环：

<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。但这在我的情况下也不起作用

这是你的电话号码

观察：我对不工作的观察之一是因为
在
标记中定义

您在使用
文本
绑定的同一元素中有您的子元素-这不起作用，因为该绑定将用它绑定到的内容替换整个内容-在本例中是父名称。这就是为什么你看不到任何孩子的原因——标记完全丢失了

您需要将子项和父项名称绑定彼此移开：

您可以将它们移到父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>



或者任何其他保持层次结构的方法，只要带有
文本
绑定的元素保持为空。
您的子元素位于使用
文本
绑定的同一元素中-这不起作用，因为该绑定将用它所绑定的内容替换整个内容—在本例中是父名称。这就是为什么你看不到任何孩子的原因——标记完全丢失了

您需要将子项和父项名称绑定彼此移开：

您可以将它们移到父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>



或者任何其他保持层次结构的方法，只要带有
文本
绑定的元素保持为空。
我同意你的第二个建议。但我提供的代码只是一个示例代码。在实际情况中，我有用于可折叠面板的小部件。在该面板中，我的子项代码驻留。对-在这种情况下，是的-将它们包含在父项div中是有任何选项的，比如
$parent
，在子绑定中有一个
$parent
，是的，但是我不知道你为什么要在这里使用它。你根本不能-文本绑定将删除内部标记。考虑到这一点，你需要重新设计坍塌的面板。我同意你的第二个建议。但我提供的代码只是一个示例代码。在实际情况中，我有用于可折叠面板的小部件。在该面板中，我的子项代码驻留。对-在这种情况下，是的-将它们包含在父项div中是有任何选项的，比如
$parent
，在子绑定中有一个
$parent
，是的，但是我不知道你为什么要在这里使用它。你根本不能-文本绑定将删除内部标记。您将需要重新设计折叠面板以考虑这一点。