knockout.js: this in child object

Question

JS:

function Child() {
    this.method = function() {
         console.dir(this); // this should be 'p.child' <Child> since 
         //'method' called as a property of 'p.child'
         // but when you call it from KO it's actually 'p' <Parent>
    };
}

function Parent() {
    this.child = new Child();
}
var p = new Parent();
ko.applyBindings(p);

HTML:

 <a href="#" data-bind="click: child.method">foo</a>

Is it bug or a feature I just not understand?

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

You need to do the following:

function Child() {
    var self = this;
    self.method = function() {
         console.dir(self); // this should be 'p.child' <Child> since 
         //'method' called as a property of 'p.child'
         // but when you call it from KO it's actually 'p' <Parent>
    };
}

function Parent() {
    var self = this;
    self.child = new Child();
}
var p = new Parent();
ko.applyBindings(p);

http://jsfiddle.net/ZuHMY/1/

Please see here for the info on self = this;

What underlies this JavaScript idiom: var self = this?

Update

This also answer's the question about self and this here:

In knockout.js, why "this" is being assigned to "self"?

edited May 23 '17 at 11:49

Community

1
1

answered Jan 28 '14 at 12:30

hutchonoid

31,459
14
91
100

Yes, I know how to solve this problem. I just wondered if it's a bug or there is some logic I misunderstand (some application of LoD e.g.)? – Roman Bekkiev Jan 28 '14 at 12:59
Why do you make self a global again? wth. – EaterOfCode Feb 06 '14 at 13:37
@EaterOfCode whoops, typo. I forgot to add var self, updated. :) – hutchonoid Feb 06 '14 at 14:09
"removed var" is there in the commit message, Im a bit confused? – EaterOfCode Feb 06 '14 at 14:19

score 0 · Answer 2 · answered Feb 06 '14 at 14:21

I don't know this for sure, but it's possible that knockout is attempting to set the context so that you can operate on the parent from within child functions and subscriptions.

This JSFiddle shows how you can change the context of a function call using call(this):

function Child() {
    this.method = function() {
         console.dir(this);
    };
}

function Parent() {
    this.child = new Child();
} 
var p = new Parent();
p.child.method(); // child
p.child.method.call(p); // parent

knockout.js: this in child object

2 Answers2