javascript - 当 parent 的观察变化时，Knockoutjs 更新 child

Question

当使用 KnockoutJs 的父可观察对象更改时，如何触发对子元素的更新？

在我的应用程序中，我正在构建一个翻译工具。我有一个表示某些文本的原始(默认)值的 knockout 类，其中包含翻译后的 child 的集合:

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)
    }
}

child 是

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

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

父项的 defaultValue 属性绑定(bind)到输入控件。

我想做的是在更新父项的默认值时为每个子项调用我的翻译服务。但我对如何进行有点迷茫。

1. 我如何识别父级的“defaultValue”属性具有变了？
2. 我应该在父项中迭代子项吗？会发生，还是以某种方式将其也转移给 child ？

(注意，我的示例是从实际实现中简化而来的)

编辑:将其与一个函数一起添加到我的 defaultValue 元素中，仍然传递旧值:

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

其中 updateChildren 迭代子数组。

Answer 1

这是一个工作示例: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);
    });