Strange behaviour of this in backbone.js Controller

Question

Yes I am new to JS and also in backbonejs.

Lets dig into the problem now.

I am having a very strange behaviour of this in backbonejs Controller.

Here is the code of my controller

var controller = Backbone.Controller.extend( {
    _index: null,

    routes: {
        "": "index"                   
    },


    initialize: function(options){

        var self = this;
        if (this._index === null){

            $.getJSON('data/album1.json',function(data) {
                 //this line is working self._index is being set
                 self._index = new sphinx.views.IndexView({model: self._photos});
            });
            Backbone.history.loadUrl();   
        }

    },

    index: function() {
         //this line is not working
         //here THIS is pointing to a different object
         //rather than it was available through THIS in initialize method
        this._index.render();
    }

});

Here is the lines at the end of the file to initiate controller.

removeFallbacks();
gallery = new controller;
Backbone.history.start();

Now , i am missing something. But what ??? If this is the wrong way what is the right way?? I need to access the properties i set from the initialize method from index method.

It looks like the caller function of index method is changing it's scope. I need to preserve the scope of that.

@muistooshort Actually i am following [Jquerys best friends](http://addyosmani.com/blog/building-spas-jquerys-best-friends/) tutorial. — MD. Sahib Bin Mahboob, Mar 31 '13 at 17:49
I'd recommend a more up to date tutorial, Backbone hasn't had `Backbone.Controller` since version 0.5 and that came out way back in July 2011. There have been many small (and not so small) changes since 0.5 so learning such an old version will just get in your way. Also, jQuery's template system has been deprecated and is no longer supported. — mu is too short, Mar 31 '13 at 18:04

score 0 · Answer 1 · answered Mar 31 '13 at 17:59

You have to specify the route action into a Backbone Route not into a Controller. Inside the router is where you are going to initialize your controller and views.

Also, there is no method Backbone.history.loadURL(). I think you should use instead Backbone.history.start() and then call the navigate in the router instance e.g. router.navigate('state or URL');

var myApp = Backbone.Router.extend( {
    _index: null,

    routes: {
        "": "index"                   
    },

    initialize: function(options){
        //Initialize your app here
        this.myApp = new myApp();
        //Initialize your views here
        this.myAppViews = new myAppView(/* args */);

        var self = this;
        if (this._index === null){

            $.getJSON('data/album1.json',function(data) {
                 //this line is working self._index is being set
                 self._index = new sphinx.views.IndexView({model: self._photos});
            });
            Backbone.history.loadUrl(); //Change this to Backbone.history.start();
        }

    },

    // Route actions
    index: function() {
        this._index.render();
    }
});

Strange behaviour of this in backbone.js Controller

1 Answers1