Knockout.js 如何使用KnockOut JS进行动态绑定？

我试图构建一个类似于以下内容的视图：

用户选择一个父项，然后所有子项都显示在下面，在那里他们可以编辑子项的信息

我想知道的是，当用户在父网格上选择新的父网格时，动态更改子网格绑定的正确方法是什么

ko js表单中的我的视图模型现在看起来像这样：

function ViewModel(viewModelFromServer) {

  var self = this;

  self.parents = ko.observableArray(convertToKOParents(viewModelFromServer.Parents));

  self.activeChildren = ko.observableArray([]);

  self.changeParent(newParent){
    self.activeChildren = newParent.children;
  }
}

function Parent(serverParent) {

  var self = this;

  self.name = ko.observable(serverParent.Name);
  self.children = ko.observableArray(convertToKOChildren(serverParent.Children);

  self.childCount = ko.computed(function() {
    return self.children.length;
  });
}

function Child(serverChild) {

  var self = this;

  self.name = ko.observable(serverChild.Name);
  self.Age = ko.observable(serverChild.Age);
  self.Height = ko.observable(serverChild.Height);
}

现在，当用户单击父行时，我想将activeChildren切换到新的父行，但绑定不会自动应用

---

这是这种视图模型的正确方法吗？我是否应该以不同的方式执行此操作？如果是，视图模型会是什么样子？当父对象发生更改时，如何使子网格正确绑定？

我会将当前子对象设置为计算值，返回选定父对象的children属性。大概是这样的：

function ViewModel(viewModelFromServer) {
  var self = this;
  self.parents = ko.observableArray(convertToKOParents(viewModelFromServer.Parents));

  self.activeChildren = ko.computed(function() {
      return self.activeParent.children
  });
  self.activeParent = ko.observable()
  self.changeParent(newParent){
      self.activeParent(newParent)
  }

}

---

如果在没有convertToKOParents等环境函数的情况下设置JSFIDLE，我可以更清楚地演示它。

您可以使用activeParent并绑定到它的子项，而不是使用activeChildren：

<div data-bind="with: activeParent">
    <table>
        <tbody data-bind="foreach: children">
        </tbody>
    </table>
</div>

要更改：

viewModelVariable.activeParent(newParent);

另外，我认为您的childCount computed需要通过调用

children（）

，访问底层数组：

---

非常感谢你！这正是我需要的想法。我认为这将非常有效。有一阵子我的头撞在墙上

viewModelVariable.activeParent(newParent);

self.childCount = ko.computed(function() {
    return self.children().length;
});