Knockoutjs Update child when parent's observable changes
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)
}
}
And the child is
function Child(id, translation, cultureCode) {
var self = this;
self.id = id;
self.cultureCode = cultureCode;
self.translation= ko.observable(translation);
}
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.
(note, my example is simplified from the real implementation)
EDIT: added this to my defaultValue element along with a function, still passes old value:
data-bind=" value: defaultValue, event: {change: updateChildren}"
where updateChildren iterates the child array.
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);
});
If you put a reference to parent on child you should be able to do something like..
parent.defaultValue.subscribe(function(newValue){
//do something on child with newValue
});
The general idea is explained in 'extenders' http://knockoutjs.com/documentation/extenders.html
链接地址: http://www.djcxy.com/p/50138.html