3

KnockoutJsを使用して親のオブザーバブルが変更されたときに、子要素の更新をトリガーするにはどうすればよいですか？

私のアプリケーションでは、翻訳ツールを構築しています。翻訳された子のコレクションを使用して、テキストの生の（デフォルト）値を表すノックアウトクラスがあります。

function ParentObject(id, defaultValue) {
    var self = this;

    self.id = id;
    self.defaultValue = ko.observable(defaultValue);

    self.children = ko.observableArray();

    self.loadChildren = function () {
       // standard code to load the children ("lazy load", as I have gobs of data)
    }
}

そして子供は

function Child(id, translation, cultureCode) {
    var self = this;

    self.id = id;
    self.cultureCode = cultureCode;
    self.translation= ko.observable(translation);
}

親アイテムのdefaultValueプロパティは、入力コントロールにバインドされています。

親のデフォルト値を更新するときに、子ごとに翻訳サービスを呼び出します。しかし、私はどのように進めるかについて少し迷っています。

  1. 親の「defaultValue」プロパティが変更されたことをどのように認識しますか？
  2. それが起こったとき、私は親の子供たちを繰り返すべきですか、それともどういうわけかそれを子供たちに移すべきですか？

（私の例は実際の実装から簡略化されていることに注意してください）

編集：これを関数と一緒にdefaultValue要素に追加しましたが、古い値を渡します：

    data-bind=" value: defaultValue, event: {change: updateChildren}"

ここで、updateChildrenは子配列を繰り返します。

4

2 に答える 2

2

親への参照を子に置くと、次のようなことができるはずです。

parent.defaultValue.subscribe(function(newValue){
    //do something on child with newValue
});

一般的な考え方は、「extenders」http://knockoutjs.com/documentation/extenders.htmlで説明されています。

于 2012-08-02T18:36:31.757 に答える
2

これが実際の例です： JsFiddle

function ParentObject(id, defaultValue) {
    var self = this;

    self.id = id;

    self.defaultValue = ko.observable(defaultValue);

    self.defaultValue.subscribe(function(newValue){
        ko.utils.arrayForEach(self.children(), function(child) {
           alert(child.id);
        });
        console.log(newValue);
    });

    self.children = ko.observableArray();

    self.loadChildren = function () {
       // standard code to load the children ("lazy load", as I have gobs of data)
    }
}

function Child(id, translation, cultureCode) {
    var self = this;

    self.id = id;
    self.cultureCode = cultureCode;
    self.translation= ko.observable(translation);
}


var vm = function() {
    var self = this;
    self.parent = new ParentObject(1,10);
    self.parent.children.push(new Child(1,"A","1A"));
    self.parent.children.push(new Child(2,"B","2B"));
    self.parent.children.push(new Child(3,"C","3C"));
}

var viewModel = new vm();

ko.applyBindings(viewModel);

サブスクライブ機能を使用して、観察可能な変更をリッスンできます：

 self.defaultValue.subscribe(function(newValue){
        ko.utils.arrayForEach(self.children(), function(child) {
           alert(child.id);
        });
        console.log(newValue);
    });
于 2012-08-02T18:45:36.717 に答える