5

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

我无法让我的视图始终获取我的收藏。如果我从基本 url ( ) 访问我的应用程序myapp.com/，并转到我的视图的路线，则会获取该集合。如果我不去视图，而是从 访问它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功能有关。如果这是问题，我应该把它放在fetch()哪里？

4

2 回答 2

3

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

你有两个选择：

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。

+1 为您的 AMD 方法。

于 2012-05-12T07:40:15.327 回答
0

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

于 2012-05-14T00:08:15.163 回答