困惑於Backbone.js結構 - 試圖引導一個簡單的應用程序

Question

新來的Backbone，我試圖讓一個簡單的應用程序啓動並運行。我正在Grunt.js與醜化到Concat的我的所有文件按以下順序：

'assets/js/main.min.js': [ 
    'collections/**/*.js', 
    'models/**/*.js', 
    'routers/**/*.js', 
    'views/**/*.js', 
    'app.js',], 

我從字面上試圖只是呈現一個模板到<div>對於初學者。我從Backbone.js的應用程序中複製了很多。

我非常簡單的應用程序文件如下。

的意見/ offersList.js

var PH = PH || {}; 

(function ($) { 
    'use strict'; 

    PH.OffersList = Backbone.View.extend({ 

    el: $('.offers'), 

    template: _.template($('#offers-list-template').html()), 

    initialize: function() { 
     this.model.bind('change', this.render, this); 
     this.render(); 
    }, 

    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    }, 

    }); 
})(jQuery); 

型號/ offer.js

var PH = PH || {}; 

(function() { 
    'use strict'; 

    PH.Offer = Backbone.Model.extend({ 

    defaults: { 
     name: "My Offer" 
    } 

    }); 
})(); 

收藏/ offers.js

var PH = PH || {}; 

(function() { 
    'use strict'; 

    var Offers = Backbone.Collection.extend({ 
    model: PH.Offer 
    }); 

    PH.OffersCollection = new Offers(); 

})(); 

我app.js

var PH = PH || {}; 

$(function() { 
    'use strict'; 

    // kick things off by creating the `PH` 
    new PH.OffersList(); 

}); 

我在我的.html文件有一個模板，我.offers DIV中（我甚至試圖呈現數據，只是在這一點上的模板：

<ul class="offers"> 
    <script id="offers-list-template" type="text/x-mustache-template"> 
    <h1>Offers List</h1> 
    <p>Offers would go here</p> 
    </script> 
</ul> 

看起來好像該模型沒有被綁定或未被實例化。我收到就行了

Uncaught TypeError: Cannot call method 'bind' of undefined與this.model.bind("change", this.render, this), this.render();

我對文字的牆道歉，我只是很新。在我繼續之前，試圖圍繞這個簡單的解決方案來解決問題！

謝謝！

Answer 1

initialize方法有這樣的地方

this.model.bind('change', this.render, this); 

所以它期待在被傳遞到視圖這裏

// kick things off by creating the `PH` 
    new PH.OffersList(); 

一個模型正如你模型不傳遞給的看法..

model is set to undefined它是拋出一個錯誤

new PH.OffersList({model: offersModel }); 

但因爲這是OffersList（複數），你在說什麼，我希望在一個集合來傳遞，而不是在這裏..

編輯

您需要在模型中的一個新實例，直接傳遞，而不是，模型。

PH.OffersList({ model: new PH.Offer() }); 

OR

var pHModel = new PH.Offer(); 

PH.OffersList({ model: pHModel });