骨干路由器：首先等待数据被获取

Question

我想我不太明白骨干路由器的正确使用背后的想法。这就是我所得到的：

我有一些数据，当页面加载时，我从服务器获取这些数据，然后将其打包到模型和集合中。这些模型和系列的数量是无限的。我想使用路由器能够直接从一开始渲染特定集合的视图。

问题是：主干路由器启动较早，并且由于我要求它访问某个视图并触发其渲染操作，因此它无法执行此操作，因为这些视图尚未创建。这意味着我实际上必须在获取完成后启动我的路线。

我不知道这是否是正确的方法，但我想到的唯一想法是：

1. 将路由定义和 Backbone.history.start(); 位包装到单独的顶级可访问函数（即准备稍后手动调用它）。
2. 运行该函数作为我的集合的 fetch() 的 success 回调
3. 这些集合的数量未知，而且我也无法知道何时全部获取，并且我不想多次启动路线。所以我使用 _.defer() 和 _.once()。

这可行，但看起来确实很奇怪：

Routers:

    window.startRoutes = _.once(function() {

        var AccountPage = Backbone.Router.extend({

          routes: {
            'set/:id': 'renderSet',
          },

          renderSet: function(setId) {

              /** … **/

              // Call the rendering method on the respective CardView
              CardsViews[setId].render();

          }

        });

        var AccountPageRouter = new AccountPage;

        Backbone.history.start();

    });

Collection:

window.CardsCollection = Backbone.Collection.extend({

    model: Card,

    initialize: function(params) {

        /** … **/

        // Get the initial data
        this.fetch({success: function() {
            _.defer(startRoutes);
        }});

    },

});

所以我的问题是……我做得对吗？或者有更好的方法来做到这一点（必须是）？

Answer 1

您可以提前定义您的路由器；在您调用 Backbone.History.start() 之前它不会执行任何操作。

您可以在集合上绑定“重置”事件来启动历史记录，如下所示：

my_collection.bind("reset", _.once(Backbone.History.start, Backbone.History))

然后，当您的集合完全加载时，路由器将开始执行操作。我不确定这是否正是您正在寻找的（因为您提到拥有可变数量的集合）。

我也有类似的情况，只不过我在开始路由之前提前知道要加载哪些集合。我向我的路由器添加了一个 startAfter 方法，如下所示：

  window.Workspace = new (Backbone.Router.extend({
    . . .
    startAfter: function(collections) {
      // Start history when required collections are loaded
      var start = _.after(collections.length, _.once(function(){
        Backbone.history.start()
      }))
      _.each(collections, function(collection) {
        collection.bind('reset', start, Backbone.history)
      });
    }
  }));

然后在我设置了我的集合之后，

  Workspace.startAfter([collection_a, collection_b, ...])

这也可以适用于独立模型，尽管我认为您需要绑定到“重置”事件以外的其他内容。

我很高兴阅读您的示例代码，使用 _.once 和 _.defer 为我指明了正确的方向。

Answer 2

我只是在使用之前检查我的 .render() 方法是否已填写所有必填字段。如果尚未填充 - 我正在渲染一个“正在加载...”小部件。

我的所有视图都通过 this.model.bind('change', this.render, this); 订阅模型更改，因此在加载模型后，render() 将再次被调用。