Knockoutjs当父对象's可观察到的变化

Knockoutjs Update child when parent's observable changes

本文关键字：观察 变化 对象 Knockoutjs      更新时间：2023-09-26

当使用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. 当发生，或者以某种方式也将其转移到孩子身上

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

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

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

其中updateChildren迭代子数组。

下面是一个工作示例：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);
    });

如果在子对象上引用parent，则应该能够执行以下操作。。

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

一般概念在"扩展器"中进行了解释http://knockoutjs.com/documentation/extenders.html

相关文章：