在backbone.js控制器中的这种奇怪的行为

时间:2013-03-31 17:32:35

标签: backbone.js backbone-routing

是的我是JS的新手,也是backbonejs的新手。

让我们现在深入研究这个问题。

我在backbonejs Controller中有一个非常奇怪的 this 行为。

这是我的控制器的代码

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();
    }

});

以下是文件末尾用于启动控制器的行。

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

现在,我错过了一些东西。但是什么??? 如果这是错误的方式什么是正确的方法? 我需要从 index 方法访问我从初始化方法设置的属性。

看起来索引方法的调用函数正在改变它的范围。 我需要保留其范围。

1 个答案:

答案 0 :(得分:0)

您必须将路由操作指定为Backbone Route而不是Controller。在路由器内部,您将初始化控制器和视图。

此外,没有Backbone.history.loadURL()方法。我认为您应该使用Backbone.history.start(),然后在路由器实例中调用导航,例如router.navigate('state或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();
    }
});