6

我正在尝试建立一个类似于此操作的视图：

在此处输入图像描述

用户选择一个父母，然后所有的孩子都显示在下面，然后他们可以在其中编辑孩子的信息。

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

我的 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 切换到新的父行，但绑定不会自动应用。

这是处理这种视图模型的正确方法吗？我应该以不同的方式来做吗？如果是这样，该视图模型会是什么样子？当父级更改时，如何让子网格正确绑定？

4

2 回答 2

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;
});
于 2012-06-26T19:05:52.187 回答
0

我将使当前子项成为一个计算值，该值返回所选父项的子项属性。像这样的东西：

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 这样的环境函数的情况下设置 jsfiddle，我可以更清楚地演示它。

于 2012-06-26T18:44:44.793 回答