你如何使用KnockOut JS进行动态绑定？

Question

我正在尝试构建一个运算符类似于此的视图:

用户选择父母,然后所有孩子都显示在下面,然后他们可以在那里编辑孩子的信息.

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

我的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切换到新父级,但是绑定不会自动应用.

这是对这种视图模型的正确方法吗？我应该以不同的方式做这件事,如果是这样,那个视图模型会是什么样的？当父更改时,如何让子网格正确绑定？

Answer 1

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

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

由于 activeParent 将是一个可观察的，因此您只需调用它即可，不需要 changeParent 函数：

self.activeParent = ko.observable();

改变：

viewModelVariable.activeParent(newParent);

另外我认为您的 childCount 计算需要通过调用访问底层数组children()：

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