什么时候在Backbone js中获取集合的时候？

Question

所以我正在开发一个骨干应用程序,并尝试使用require.js尽可能多地模块化. 这是我的向导.

我无法获取我的视图总是获取我的收藏.如果我从基本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
  };
});

收藏/ 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功能有关.如果这是问题,我应该把它放在fetch()哪里？

Answer 1

您的代码中的问题是您campaignListView在初始化时获取集合，并且仅初始化一次。当您第二次更改时render，实际从路由器调用的方法不会调用initializeCampaignListView 的方法。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在后台工作，并且在调用 后立即调用 render 时您将没有数据fetch。

为您的 AMD 方法+1。