当父母的可观察到的变化时，Knockoutjs更新孩子 [英] Knockoutjs Update child when parent's observable changes

问题描述

当使用KnockoutJs进行父级可观察的更改时，如何触发对子元素的更新?

How do I trigger an update to child elements when a parent observable changes using KnockoutJs?

在我的应用程序中，我正在构建翻译工具.我有一个剔除类，代表一些文本的原始值(默认值)，并带有翻译后的子代:

In my application, I'm building a translation tool. I have a knockout class that represents the raw (default) value of some text, with a collection of translated children:

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属性绑定到输入控件.

The parent item's defaultValue property is bound to an input control.

我想做的是在更新父母的默认值时为每个孩子打电话给我的翻译服务.但是我对如何继续感到迷茫.

What I want to do is call my translation service for each child when I update the default value of the parent. But I'm a little lost as to how to proceed.

1. 我如何识别父级的"defaultValue"属性具有 变了吗?
2. 在那时候我应该迭代父母中的孩子吗 发生，还是以某种方式将其移给孩子?

1. How do I recognize that the parent's "defaultValue" property has changed?
2. Should I iterate the children in the parent when that happens, or somehow move that to the child as well?

(请注意，我的示例从实际实现中简化了)

(note, my example is simplified from the real implementation)

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

added this to my defaultValue element along with a function, still passes old value:

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

updateChildren在其中迭代子数组.

where updateChildren iterates the child array.

推荐答案

下面是一个有效的示例: JsFiddle

Here is a working example : 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);

您可以使用订阅功能来监听可观察到的更改:

​ You can use subscribe function to listen observable changes :

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

这篇关于当父母的可观察到的变化时，Knockoutjs更新孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！