Question

Currently playing about with KnockoutJS. Just trying to update an observable array from a ajax/json feed (using twitter) in this example.

It seems to lose scope of what “this” is when trying to update my observable array (currentTweets). I’ve tried adding bind to various places but no such luck.

The error I get is: Uncaught TypeError: Cannot call method ‘push’ of undefined

I’m sure I am doing something stupid, here it is in action (not much to look at!)

http://jsbin.com/oyuteb

I’ve read a lot about Knockout mapping but don’t feel confident enough to take that on yet!

So, any help or guidance would be fab.

Thanks

Answer 1

The simplest way to solve this is to proxy your viewmodel’s “this” into another variable so it is available inside handlers. When jquery ajax calls the success handler, the context is different so this refers to something else.

So you would have

function twitterViewModel() {
    var self = this;
    this.currentTweets = ko.observableArray([]);
    ...

    this.getTweets = function(){

        $.ajax({
            dataType: 'jsonp',
            url: 'http://search.twitter.com/search.json?callback=?&q=' 
                     + this.searchTerm() + '&rpp=50',
            success: function (data) {
                $.each(data.results, function(i,tweet){
                    self.currentTweets.push({'keywords' : 'bugger'});
                });
            }
        });
    }
}

You can eliminate the bind calls and use self instead.

Hope this helps.