Backbone.js：this.model是undefined

Question

我已經花了兩個星期的時間來學習Backbone.js，然後用Require.js模塊化應用程序。但似乎有些東西我沒有在整個初始化和讀取過程中得到。

我有兩條路線，一條顯示整個集合，而另一條顯示一個單獨的模型。我希望能夠用這兩種路線中的任何一種啓動應用程序。

如果我開始在單個模型網址上加載集合url和更高版本，則所有事情都按預期工作。如果我通過url路由啓動應用程序到單個模型，我在視圖上得到了錯誤：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 
}; 
}); 

視圖/ 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方法擷取OffersCollection，所以在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. 
    }  

}