2012-08-02 96 views
3

当父可观察性使用KnockoutJs更改时,如何触发子元素的更新?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. 如何识别父母的“defaultValue”属性 已更改?
  2. 当 发生时,我是否应该迭代父代中的孩子,或者以某种方式将其移动到孩子身上?

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

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

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

哪里updateChildren迭代子数组。

回答

2

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

我明白你要去那里了,我喜欢小提琴的结果。我只是没有看到我的应用程序中订阅的事件触发。 – reallyJim 2012-08-02 20:01:05