当父母可观察到的变化时，淘汰赛 Js 更新孩子答案

【问题标题】：Knockoutjs Update child when parent's observable changes当父母可观察到的变化时，淘汰赛 Js 更新孩子
【发布时间】：2012-07-31 17:44:48
【问题描述】：

当父 observable 使用 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 属性绑定到输入控件。

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

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

（注意，我的例子是从实际实现中简化的）

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

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

updateChildren 迭代子数组的位置。

【问题讨论】：

标签： javascript mvvm knockout.js

【解决方案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);
    });

【讨论】：

我知道你要去哪里，我喜欢小提琴中的结果。我只是没有在我的应用中看到订阅的事件触发。

【解决方案2】：

如果你在孩子上引用父母，你应该能够做类似的事情..

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

'extenders'http://knockoutjs.com/documentation/extenders.html 中解释了总体思路

【讨论】：