Javascript 淘汰嵌套绑定相互更新（但不更新dom）的问题

我有一个复合视图模型，里面有其他视图模型，它们引入了嵌套绑定。因此，一个嵌套的子模型可能会改变另一个子模型的可观测值，或者改变其父模型所拥有的可观测值

示例可在

在这里，我修改了一个可观察对象（

itemContainer

），它本身公开了一个可观察数组属性（

items

）。我希望每次修改

items

属性或

itemContainer

本身时都能够更改绑定。但是，这两种方法似乎对dom没有任何影响，而实际上绑定是按预期进行的——我正在使用jQuery修改一个span，以在我的操作之后断言元素的实际计数（请参见“实际计数”值）

因此，我所做的主要区别在于，

itemContainer

不再是一个可观察的属性。这一次，它几乎像我预期的那样工作

但是，每当我更改

itemContainer

或其

items

属性时，我需要能够让dom自动更新。我该怎么做

此外，在这两种情况下，

viewModel.actions.count

computed成员的绑定不会重新计算。如果您能深入了解为什么它不选择这些更改，我将不胜感激。

这有帮助吗（）

标记：

  <p id="target">
  <!--ko if: contents.itemContainer() -->
  <!--ko foreach: contents.itemContainer().items -->
    <!--ko template: 'itemTemplate', data: $data -->
    <!--/ko -->
  <!--/ko -->
  <!--/ko -->
   </p>
   <p id="actions">
      <button data-bind="click: actions.add">Add</button>
      <button data-bind="click: actions.reset">Reset</button>
    </p>
    <p>Databound count:<span data-bind="text: actions.count"></span></p>
    <p>Actual count:<span id="actualCount"></span></p>
    <script type="text/html" id="itemTemplate">
      <span data-bind="text: $data"></span>
    </script>

这有帮助吗

标记：

  <p id="target">
  <!--ko if: contents.itemContainer() -->
  <!--ko foreach: contents.itemContainer().items -->
    <!--ko template: 'itemTemplate', data: $data -->
    <!--/ko -->
  <!--/ko -->
  <!--/ko -->
   </p>
   <p id="actions">
      <button data-bind="click: actions.add">Add</button>
      <button data-bind="click: actions.reset">Reset</button>
    </p>
    <p>Databound count:<span data-bind="text: actions.count"></span></p>
    <p>Actual count:<span id="actualCount"></span></p>
    <script type="text/html" id="itemTemplate">
      <span data-bind="text: $data"></span>
    </script>

---

更新的工作小提琴：

问题出在您的模板中。您可以绑定contents.itemContainer.items

<!--ko foreach: contents.itemContainer.items -->

相反，您可以将ko与绑定一起使用

<!-- ko with: contents.itemContainer -->
  <!-- ko foreach: items -->

具有绑定的ko会自动展开itemContainer，并在其中使用模板（如果已定义）。请看这里：

另外，请注意，即使定义了itemContainer，您仍然需要调用observable来获取底层对象

<!--ko foreach: contents.itemContainer().items -->

---

此处更新了工作小提琴：

问题出在您的模板中。您可以绑定contents.itemContainer.items

<!--ko foreach: contents.itemContainer.items -->

相反，您可以将ko与绑定一起使用

<!-- ko with: contents.itemContainer -->
  <!-- ko foreach: items -->

具有绑定的ko会自动展开itemContainer，并在其中使用模板（如果已定义）。请看这里：

另外，请注意，即使定义了itemContainer，您仍然需要调用observable来获取底层对象

<!--ko foreach: contents.itemContainer().items -->

您将如何更改items容器？@MatthewJamesDavis，一个可能的情况是在reset函数中，我设置了一个全新的对象：

itemContainer（{items:ko.observearray（[“item x”，“item y”]）}）

；我使用的jsfiddle是我正在处理的一个“简化”场景，因此这些示例可能没有直接意义，但上面的代码片段是我想要使其工作的有问题的代码片段。此外，只能更改可观察数组-我的意思是我应该支持这两种方法请不要忘记将答案标记为已接受，如果它有助于您如何更改项目容器？@MatthewJamesDavis，一种可能的情况是在重置函数中设置一个全新的对象：

itemContainer({items:ko.observearray（[“item x”，“item y”]）}

；我使用的jsfiddle是“简化的”我正在研究的场景，因此示例可能没有直接意义，但上面的代码片段是我想让它发挥作用的有问题的代码片段。此外，只可能更改可观察数组-我的意思是我应该支持这两种情况。请不要忘了将答案标记为已接受，如果它有助于您感谢您和@TSV的解决方案工作对我来说，我很忙。不过我正忙着修复我正在处理的真实项目。谢谢，你和@TSV的解决方案对我都很有效。不过我正忙着修复我正在处理的真实项目。