何时是在 Backbone js 中获取集合的合适时间？

Question

所以我正在开发一个主干应用程序，并尝试使用 require.js 尽可能多地模块化事物。 This 一直是我的向导。

我无法让我的视图始终获取我的收藏。如果我从基本 url (myapp.com/) 访问我的应用程序，并转到我的视图路径，则会获取集合。如果我不去视图，而是从myapp.com/#/campaigns 访问它，则不会获取集合。

这是一些相关的代码。

router.js

    define([
  'jQuery',
  'Underscore',
  'Backbone',
  'views/home/main',
  'views/campaigns/list'
], function($, _, Backbone, mainHomeView, campaignListView ){
  var AppRouter = Backbone.Router.extend({
    routes: {
      // Define some URL routes
      'campaigns': 'showCampaigns',

      // Default
      '*actions': 'defaultAction'
    },
    showCampaigns: function(){
      campaignListView.render();
    },
    defaultAction: function(actions){
      // We have no matching route, lets display the home page 
      //mainHomeView.render(); 
    }
  });

  var initialize = function(){
    var app_router = new AppRouter;
    Backbone.history.start();
  };
  return { 
    initialize: initialize
  };
});

collections/campaigns.js

    define([
  'jQuery',
  'Underscore',
  'Backbone',
  'models/campaigns'
], function($, _, Backbone, campaignsModel){
  var campaignsCollection = Backbone.Collection.extend({
    model: campaignsModel,
    url: '/campaigns',
    initialize: function(){
    }

  });
  return new campaignsCollection;
});

视图/广告系列/list.js

define([
  'jQuery',
  'Underscore',
  'Backbone',
  'collections/campaigns'
  ], function($, _, Backbone, campaignsCollection){
      var campaignListView = Backbone.View.extend({
        el:$('#container'),
        initialize:function(){
          this.collection = campaignsCollection;
          this.collection.fetch();
        },
        render: function(){
          var data = {
            campaigns: this.collection,
            _: _
          };
          $('#container').html('Campaigns length: '+data.campaigns.models.length);
        }
      });
      return new campaignListView;
  });

关于我做错了什么有什么想法吗？我相信这与在视图的initalize 函数中调用this.collection.fetch() 有关。如果是这个问题，我应该把fetch()放在哪里？

Answer 1

您的代码中的问题是您的campaignListView 在初始化时获取集合并且仅初始化一次。当您第二次更改url 时，实际上从路由器调用的render 方法不会调用您的campaignListView 的initialize 方法。

这里有两个选择：

1。返回该类而不是您的campaignListView 的实例并在路由器中对其进行初始化：

// in your router code
showCampaigns: function(){
    var campaignListViewInstance = new campaignListView(); // don't forget the brackets after your initialize function
    campaignListViewInstance.render();
},

// in your campaignListView code :
return campaignListView; // without "new"

这将在每次路由器被击中时初始化代码。

2。将您的 fetch 放在 render 方法中

// in your campaignListView code :
initialize:function(){
    this.collection = campaignsCollection;
},
render: function(){
    this.collection.fetch({success: function(collection) {
        var data = {
            campaigns: collection,
            _: _
        };
        $('#container').html('Campaigns length: '+data.campaigns.models.length);
    }); // this will be fetched everytime you render and also it has success callback
}

另外请注意，您应该在末尾用括号替换所有创建实例的函数

return new campaignListView; --> return new campaignListView();
return new campaignsCollection; --> return new campaignsCollection();

您将面临的另一个问题是fetch 的异步工作。您应该使用集合的成功或事件驱动渲染，因为fetch 在后台工作，并且当您在调用fetch 后立即调用渲染时，您将没有数据。

+1 为您的 AMD 方法。

Answer 2

我真的应该更新教程，但最好不要返回实例化模块。不妨试试http://backboneboilerplate.com