0

在过去的两周里，我一直在尝试学习 Backbone.js，然后还使用 Require.js 对应用程序进行了模块化。但似乎在初始化和获取的整个过程中我没有得到一些东西。

我有两条路线，一条展示整个系列，而另一条只展示一个单独的模型。而且我希望能够使用两条路线中的任何一条来启动应用程序。

如果我开始加载集合 url，然后在单个模型 url 上加载，一切都会按预期工作。如果我使用指向单个模型的 url 路由启动应用程序，则会收到错误：TypeError: this.model is undefined this.$el.html(tmpl(this.model.toJSON()));在视图上。

如果我为模型设置默认值，它会渲染视图但不会使用真实数据获取它。我也尝试在模型的 fetch 函数中处理成功事件，但没有任何运气。

路由器.js

define(['jquery','underscore','backbone','models/offer','collections/offers','views/header','views/event','views/offer/list', 
], function($, _, Backbone, OfferModel, OffersCollection, HeaderView, EventView, OfferListView){

var AppRouter = Backbone.Router.extend({    

routes: {
    'event/:id' : 'showEvent',
  '*path': 'showOffers'
},

initialize : function() {       
    this.offersCollection = new OffersCollection();
    this.offersCollection.fetch();
    var headerView = new HeaderView();
    $('#header').html(headerView.render().el);          
},

showEvent : function(id) {
    if (this.offersCollection) {
        this.offerModel = this.offersCollection.get(id);
    } else {
        this.offerModel = new OfferModel({id: id});
        this.offerModel.fetch();
    }       
    var eventView = new EventView({model: this.offerModel});    
    $('#main').html(eventView.render().el);     
},

showOffers : function(path) {
    if (path === 'betting' || path === 'score') {
        var offerListView = new OfferListView({collection: this.offersCollection, mainTemplate: path});  
      $('#main').html(offerListView.render().el) ;       
    }       
},    
});

var initialize = function(){    
  window.router = new AppRouter;
  Backbone.history.start();
};

return {
  initialize: initialize
};
});

意见/事件.js

define(['jquery','underscore','backbone','text!templates/event/main.html',
], function($, _, Backbone, eventMainTemplate){

var EventView = Backbone.View.extend({
    initalize : function(options) {
        this.model = options.model; 
        this.model.on("change", this.render);       
    },

    render : function() {
        var tmpl = _.template(eventMainTemplate);
        this.$el.html(tmpl(this.model.toJSON()));
        return this;
    }
});

return EventView;   
});
4

1 回答 1

1

initialize您正在路由器的方法中创建和获取 OffersCollection ，因此永远不会命中该else块，因为它始终是真实的。showEventthis.offersCollection

在评论之后，我认为你需要这样做：

showEvent : function(id) {
    var that = this;
    var show = function(){
       var eventView = new EventView({model: that.offerModel});    
       $('#main').html(eventView.render().el); 
    };
    // offersCollection is always defined, so check if it has the model
    if (this.offersCollection && this.offersCollection.get(id)) {
        this.offerModel = this.offersCollection.get(id);
        show();
    } else {
        this.offerModel = new OfferModel({id: id});
        this.offerModel.fetch().done(function(){
           // model is fetched, show now to avoid your render problems.
           show();
        });
        // alternatively, set the defaults in the model,
        // so you don't need to wait for the fetch to complete.
    }       

}
于 2013-03-01T15:40:16.980 回答