karimayachi
commented
4 years ago Short answer
You can pass the parent in your binding like so:
<button data-bind="click: getFieldName.bind(null, $parent)">Show Name</button>And use it in your Viewmodel:
self.getFieldName = function(parent, data, event) {
console.log(parent.name());
}Long answer
Object instances in JavaScript, or indeed any language, don't have a hierarchy. They can have any number of references to it. Pushing an object to an array doesn't create a hierarchy, it just adds another reference to it. Hierarchy is something the developer implies within the context of the object.
That said: Knockout does create a hierarchy, because it adds context to an object, once this object is used as a viewmodel and that viewmodel is used to bind against the DOM. Now, the viewmodel object is part of a hierarchical context: the DOM.
Knockout creates a binding-context for each level of nested foreach/with/etc -binding. These binding contexts are hierarchical and have a parent, based on their position in the DOM.
It doesn't however impose this hierarchy on the underlying object, because that object can be used simultaneously in many contexts (each with it's own hierarchical structure) or even completely outside of the binding context.
So the view is the only place where the object 'lives in context' and the place to get the parent. As in the above example.
I agree though that in many instances it would be very helpful to access the binding context from the viewmodel in callback-functions as per your question, because in callback functions you could actually know in what context the object lives. I have been in that situation many times, but every time I ask myself if I could rethink my problem, because it usually is not necessary to rely on a hierarchy that isn't actually there.
Finally (and I have done so many times before) if it really is necessary and you are certain that the object will always be used in a hierarchical context, you could always introduce the parent-child relation yourself:
class ParentTable {
constructor() {
this.name = ko.observable('MyName');
this.items = ko.observableArray();
let newObject = new ChildObject(this);
this.items.push(newObject);
}
}
class ChildObject {
constructor(parent) {
this.parent = parent;
this.name = ko.observable('ChildName');
}
}Regards
julientype
The main view holds one array self.Tables = ko.observableArray();
in the array i give it a name and attach a nested array with more variables.... var self = this; self.name = ko.observable(iname); self.items = ko.observableArray();
I attach create a click function self.removeTable = function(data,event) self.Tables.remove(data); ====this works no problem on the array but not the nested one==== self.getFieldName = function(data,event) =====problem is in the nested array==== the data object needs to be smarter..... ko is passing reference to it like var a = data.parent,index; or var a = data.item;
you have nothing to play with without running mass loop to find the object index
i may need to run other types of action on the selected data object....
should work as a pointer object for the array nested elements and parent. function(data,event) self.Tables[data.parentID][dada.id]
no loop your passing index location of the item. why loop 1000 entry when you can call it in one shot with data object values