我的Backbone.View將不會渲染

Question

我重組了我的全部工作的Backbone.js項目，並將我的模型，集合和視圖的所有模型，集合和視圖都轉換爲單獨的文件，並做了一些重寫，現在它不會渲染。我試過了我能想到的一切。有小費嗎？

var SessionView = Backbone.View.extend({ 
    model: Session, 
    el: '#list', 
    template: _.template($('#session-template').html()), 
    initialize: function() { 
     this.model.bind('change', _.bind(this.render, this)); 
     this.render(); 
    }, 
    render: function() { 
     this.$el.html(this.template({sessions: sessionList})); 
     return this; 
    } 
}); 
var sessionView = new SessionView(); 

var SessionListView = Backbone.View.extend({ 
    el: '#list', 
    model: sessionList, 
    initialize: function() { 
     sessionList.bind('add', this.add, this); 
     sessionList.bind('reset', this.add, this); 
     sessionList.fetch(); 
    }, 
    render: function() { 
     var view = new sessionListView(); 
     this.$el.append(view.render().el); 
     new SessionView({model: Session}); 
     return this; 
    } 
}); 

var sessionListView = new SessionListView(); 

Answer 1

幾件事情，我注意到：

1. Backbone.View沒有一個模型屬性。只有Backbone.Collection具有模型屬性，該主幹將用於使用指定的模型創建模型實例構造函數（藍圖）以及傳遞給它的數據。

   但意見沒有這樣的功能（，據我所知，）。人們通常在創建視圖時通過特定類型模型的實例與選項，這與指定在視圖的構造函數中指向模型構造函數的模型屬性不同。

   sessionList並不似乎是因爲它是在視圖的構造函數中指定的模型（的一個實例。如果是，它會被所有的SessionListView實例共享一個實例，它是不是在大多數情況下所需的行爲）似乎是undefined

   在

   如下：new SessionView({model: Session});Session看起來並不像一個模型的實例（不以大寫字母開始，希望你以下命名約定），也似乎undefined

   好吧，沒有什麼能阻止你在視圖的構造函數中指定模型構造函數或將模型構造函數傳入視圖，但是你應該在視圖內部創建一個實例（，主要是初始化）以便使用。換句話說，你不能做blueprintOfAModel.bind('change'..);，你應該爲視圖建立一個實際的模型。

2. 你似乎在SessionListView本身render法var view = new sessionListView();不會創造SessionListView情況下的無限數量將創造新的SessionListView當你只嘗試創建一個..？那麼

   通過再次找，你是不是調用實際構造SessionListView與new運營商，但它（sessionListView），這很可能引發錯誤的實例。

3. SessionView和SessionListView都指向相同的元素，這看起來很奇怪。我之前沒有看到過這樣做的人，因爲修改el的一個視圖會對另一個視圖產生影響，這在大多數實際情況中都是不希望的。

   也由名字來看，因爲你有一個列表視圖會議，SessionView不應該指向一個特定的元素與id選擇的。您應該爲每個SessionView實例創建一個新元素。如果您未指定el屬性，Backbone將爲您執行此操作。

（我說你創建了一個無意的混亂，是不存在一點點改寫：）

---

是有道理的，你的代碼應該看起來有點像的以下。請注意，事情開始用大寫字母的構造器功能和事物開始以小寫字母是對象實例

var Session = Backbone.Model.extend({ 
    defaults: {}, 
    initialize: function() {} 
}); 
var SessionList = Backbone.Collection.extend({ 
    model: Session, 
    initialize: function() {} 
}); 
var SessionView = Backbone.View.extend({ 
    initialize: function() { 
    this.model.bind('change', _.bind(this.render, this)); 
    this.render(); 
    }, 
    template: _.template($('#session-template').html()), 
    render: function() { 
    this.$el.html(this.template({ 
     session: this.model 
    })); 
    return this; 
    } 
}); 
var SessionListView = Backbone.View.extend({ 
    el: '#list', 
    initialize: function() { 
    this.collection.bind('add', this.add, this); // method doesn't exist, should throw error 
    this.collection.bind('reset', this.add, this); // same here 
    this.collection.fetch(); // <--- watch out, this happens asynchronously 
    }, 
    render: function() { 
    // iterate through collection, create instances of SessionView and append to el 
    return this; 
    } 
}); 

var sessionList = new SessionList(); // will create n number of Session instances in future 

var sessionListView = new SessionListView({ // will create n number of SessionView instances in future 
    collection: sessionList 
});