Backbone.js：this.model未定義

Question

在過去的兩周中，我一直在嘗試學習Backbone.js，然后還使用Require.js對應用程序進行模塊化。 但是似乎有些東西在初始化和獲取的整個過程中都沒有。

我有兩條路線，一條顯示整個收藏，而另一條僅顯示一個單獨的模型。 而且我希望能夠同時使用這兩種方法來啟動應用程序。

如果我開始加載集合URL，然后再加載到單個模型URL，則一切都會按預期進行。 如果我使用指向單個模型的URL路徑啟動應用程序， TypeError: this.model is undefined this.$el.html(tmpl(this.model.toJSON()));收到錯誤： TypeError: this.model is undefined this.$el.html(tmpl(this.model.toJSON())); 在視圖上。

如果我為模型設置默認值，則它會渲染視圖，但不會使用真實數據獲取它。 我也嘗試過在模型的訪存函數中處理成功事件，但沒有任何運氣。

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

views / event.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;   
});

Answer 1

您正在路由器的initialize方法中創建和獲取OfferCollection，因此showEvent的else塊將永遠不會被命中，因為this.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.
    }       

}