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

activeChildrenを使用する代わりに、activeParentを使用して、その子にバインドできます。

<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 に答える