Backbone.js 路由器初始化不会立即运行

Question

我的代码如下：

var AppRouter = Backbone.Router.extend({

    _data: null,
    _length: 0,
    _index: null,
    _todos: null,
    _subtodolist: null,
    _subtodos: null,

    routes: {
        "*action": "index",
        "category/:name": "hashcategory"  
    },

    initialize: function(options){
        var self = this;
        if (this._index === null){
            $.ajax({
                url: 'data/todolist.json',
                dataType: 'json',
                data: {},
                success: function(data) {
                    self._data = data;
                    self._todos = new TodosCollection(data);
                    self._index = new CategoriesView({collection: self._todos});
                    //self._index.render(); 
                }
            });
            return this;
        }
        return this;
    },

    index: function(){
        this._index.render();
    },
 ....

但是当我开始时，firebug 控制台面板总是告诉我this._index 在index 函数中为空。我必须在$.ajax success 回调函数的底部使用self._index.render() 来渲染主页（上面已注释掉）。 index 函数似乎在 initialize 函数之前运行。这怎么会发生，我该如何解决？

顺便说一句，在routes中，如果我使用"": "index"，它将不起作用。我必须使用"*action": "index"。但我在其他地方了解到默认 url 可能只是空字符串。为什么我不能在这里使用它？

Answer 1

看起来发生这种情况是因为 this._index 仅在 ajax 回调中设置。因为这是异步的，所以不能保证它会在索引事件处理程序触发之前执行。

根据文档，您在初始加载时需要的模型should be bootstrapped。

如果这不可能，构建此代码的一种方法可能是在路由被命中时获取您的数据，并将重置事件绑定到您的视图，例如

var CategoriesView = Backbone.View.extend({
    initialize: function() {
        this.collection.on("reset", this.render);

    },

    ...

var AppRouter = Backbone.Router.extend({

    _index: null,
    _todos: null,

    routes: {
        "": "index",
        "category/:name": "hashcategory"  
    },

    initialize: function(options){
        var self = this;

        self._todos = new TodosCollection();
        self._index = new CategoriesView({ collection: self._todos });
    },

    index: function(){
        this._todos.fetch();
    },

您还需要设置您的集合以构建适当的 URL 来请求 data/todolist.json。

Answer 2

确实，这里的问题是initialize 在它内部的 ajax 调用被解决之前返回。

您可以在入口点执行以下操作（通常为$.ready()）

var self = this,
    p = $.ajax({
    url: 'data/todolist.json',
    dataType: 'json'
});

p.done(function (data) {
    AppRouter = new Backbone.Router({data: data});
    Backbone.history.start({ pushState: true });    
});

这将获取路由，然后用它们初始化路由器并启动Backbone.history。显然你不需要在initialize中再次调用ajax，直接使用options中传入的数据即可。

Answer 3

您的问题是路线的顺序。路由按顺序进行评估，因此“*action”将始终匹配。

试试：

routes: {
  "category/:name": "hashcategory"
  "*action": "index",
}