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

【问题标题】：Backbone Routers: wait for data to be fetched first骨干路由器：等待首先获取数据
【发布时间】：2011-12-10 23:22:52
【问题描述】：

我认为我不太明白正确使用 Backbone 路由器背后的想法。这是我得到的：

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

问题是：骨干路由器启动得很早，因为我要求它访问某个视图并触发其render 操作，它不能这样做，因为这些视图尚未创建。这意味着我实际上必须在获取完成后启动我的路线。

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

将路由定义和Backbone.history.start(); 位包装到一个单独的顶级可访问函数中（即准备稍后手动调用它）。
将该函数作为我收藏的fetch() 的success 回调运行
这些集合的数量是未知的，我也没有办法知道它们什么时候都被提取了，我不想多次启动路由。所以我使用_.defer()和_.once()。

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

路由器：

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

    });

收藏：

window.CardsCollection = Backbone.Collection.extend({

    model: Card,

    initialize: function(params) {

        /** … **/

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

    },

});

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

【问题讨论】：

为什么要立即进行ajax调用？为什么不简单地使用初始数据加载所需的 json 渲染页面并将数据传递到主干启动？

标签： routes logic backbone.js

【解决方案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 的使用为我指明了正确的方向。

【讨论】：

不是my_collection.bind("reset", _.once(Backbone.history.start))吗？
您对_.once() 使用了错误的参数。我将编辑您的答案以解决此问题。 kthxbye :)
_.once() 示例对我不起作用。我不得不使用：app.users.on("reset", _.once(function () { Backbone.history.start(); }));

【解决方案2】：

我只是在我的.render() 方法中检查是否填写了所有必填字段，然后再使用它。如果尚未填充 - 我正在渲染一个“Loading...”小部件。

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

【讨论】：