Knockout data-bind scope variable "this"

Question

I have a HTML element bound to one of observables in my view model that is build with John Resig's simple javascript inheritance.

<div data-bind="with: selectedItem()">
    ...
    <div  data-bind="click: $root.save">Save changes</div>
    ...
</div>

My ViewModel looks like this.

var ViewModel = Class.extend({
    init: function(type){
        this.type = type;
        this.selectedItem = ko.observable({name: "My name"});
    },
    save: function(data){
        alert(this.type);
    }
});

The "this" in the ViewModel#save references to "selectedItem()". In other words, "this" references to "data" passed into the function. How can I access to the instance of ViewModel, instead?

Edited

The intention here is to inherit functions from ViewModel. I would like to access "this.type" as "first" and "second" respectively.

var FirstViewModel = ViewModel.extend({
    init : function() {
    this._super('first');
    }
});

var SecondViewModel = ViewModel.extend({
    init : function() {
    this._super('second');
    }
});

Please refer to John Resig's simple javascript inheritance [link](http://ejohn.org/blog/simple-javascript-inheritance/) — S.N, May 18 '12 at 20:50
I love how John Resig refuses to mention mootools, or the fact that mootools has been doing this for ages. Yay! — Chris Baker, May 18 '12 at 22:36

score 0 · Accepted Answer · edited May 23 '17 at 10:28

0

Check out this answer, and the one below it: https://stackoverflow.com/a/346044/1388165

You're hitting one of the interesting parts of Javascript, where "this" refers to the object that is calling the function, not the parent object of the function being called. This can be dealt with by using closures, such as the common that = this pattern in the example below.

If you are going to be spending a lot of time with Javascript, I'd strongly recommend Douglas Crockford's book "Javascript: The Good Parts", it will make you aware of a lot of things like this. I'd also recommend watching Crockford's talks on YouTube (there are many).

Edit with example:

var ViewModel = Class.extend({
    that: {},
    init: function(){
        that = this;
        selectedItem = ko.observable({name: "My name"});
    },
    save: function(data){
        alert(that);
    }
});

var o = new ViewModel();
o.save();

edited May 23 '17 at 10:28

Community

1
1

answered May 18 '12 at 21:00

Andrew N Carr

336
1
5

Thanks very much. Unfortunately, the proposed solution does not work. I get "Exception: ReferenceError: that is not defined". – S.N May 18 '12 at 21:16
Sorry, the first example doesn't work in an object literal. I've updated the example with a pattern that works. – Andrew N Carr May 18 '12 at 21:29
For more information, check out this question:http://stackoverflow.com/questions/133973/how-does-this-keyword-work-within-a-javascript-object-literal – Andrew N Carr May 18 '12 at 21:30
Apologies for my unclear question. "var that = ViewModel;" references to ViewModel, instead of the instance of ViewModel... I updated the original question to clarify the problem I am facing. – S.N May 18 '12 at 22:12
Seeing "this" references to the same object as "data", does this indicate that KO copied my "save" method to the "data" object? – S.N May 18 '12 at 22:30
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/11447/discussion-between-andrew-n-carr-and-s-n) – Andrew N Carr May 18 '12 at 23:08

Knockout data-bind scope variable "this"

1 Answers1