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

Question

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

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

这是一些相关的代码。

路由器.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
  };
});

收藏/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;
  });

关于我做错了什么的任何想法？我相信这与调用 this.collection.fetch() 有关。在 initalize View 的功能。如果这是问题所在，我应该把 fetch() 放在哪里？ ?

Answer 1

您的代码中的问题是您的 campaignListView初始化时获取集合，并且只初始化一次。您的 render实际从路由器调用的方法不会调用您的 initialize CampaignListView 的方法，当您更改 url你的第二次。
你有两个选择:
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 后立即调用 render 将没有数据.
+1 为您的 AMD 方法。