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

集合/ 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时，实际从路由器调用的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。将您的提取放在渲染方法

中

// 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方法。

Answer 2

我应该更新教程，但最好不要返回实例化的模块。也许可以尝试查看http://backboneboilerplate.com

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

2 个答案:

1。返回类而不是campaignListView的实例并在路由器中初始化它：

2。将您的提取放在渲染方法