Knockoutjs更新的儿童在父母的观察到的变化(Knockoutjs Update child

2019-09-20 16:59发布

如何使用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);
}

父项的默认值属性绑定到一个输入控制。

我想要做的就是打电话给我翻译服务为每一个孩子时,我更新父的默认值。 但我有点失去了对如何继续。

  1. 如何认识到父母的“默认值”属性发生变化?
  2. 我应该在迭代时出现这种情况,或以某种方式将其移至孩子以及家长的孩子吗?

(注意,我的例子是从真正的实现简化)

编辑:添加了这个与功能沿着我的默认值元素,还通过旧值:

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


Answer 2:

如果你把一个参考家长对儿童,你应该能够做到像..

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

总体思路是“增量”解释http://knockoutjs.com/documentation/extenders.html



文章来源: Knockoutjs Update child when parent's observable changes