Backbone Collection視圖只渲染集合中的最後一個對象

Question

我試圖將集合視圖的渲染輸出放到dom上。但是，只有集合中的最後一個對象纔會顯示在進程結束的頁面上。

我有一個事件處理程序中設置的視圖，以便在單擊某個項目時，它的title將被註銷。每當我點擊放置在Dom上的這個單一元素時，即使只顯示一個對象的標題，也會記錄每個對象的標題，因此每個處理程序都被應用於最終元素，但以某種方式註銷了正確的標題。

有誰知道我可以集合中呈現出的每個項目，而不僅僅是最後一個？以下是我的代碼快速瀏覽。

的最終目標是要列出每部電影的名字。

型號

首先，定義模型 - 平平淡淡這裏

var FilmModel = Backbone.Model.extend({}); 

查看

下面是我爲電影模式

var FilmView = Backbone.View.extend({ 

    // tagName: 'li', 

    initialize: function() { 
    this.$el = $('#filmContainer'); 
    }, 

    events: { 
    'click': 'alertName' 
    }, 

    alertName: function(){ 
    console.log("User click on "+this.model.get('title')); 
    }, 

    template: _.template($('#filmTemplate').html()), 

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

}); 

作出觀的簡化版本

收藏品

再次，似乎標準。

var FilmList = Backbone.Collection.extend({ 
    model: FilmModel, 
}); 

集合視圖

從Codeschool當然，我承擔了骨幹

var FilmListView = Backbone.View.extend({ 
    // tagName: 'ul', 

    render: function(){ 
    this.addAll(); 
    return this; 
    }, 

    addAll: function(){ 
    this.$el.empty(); 
    this.collection.forEach(this.addOne, this); 
    }, 

    addOne: function(film){ 
    var filmView = new FilmView({ model: film }); 
    this.$el.append(filmView.render().el); 
    // console.log(this.$el); 
    } 

}); 

轉到時間

var filmList = new FilmList({}); 

var filmListView = new FilmListView({ 
    collection: filmList 
}); 


var testFilms = [ 
    {title: "Neverending Story"}, 
    {title: "Toy Story 2"} 
]; 

filmList.reset(testFilms); 

filmListView.render(); 

改編自我骨幹的瞭解，到目前爲止，這是什麼應該是正在使用FilmView中指定的模板渲染filmList collect中的每個項目離子進入filmListView中的el。

然而，實際發生的事情是，最後的冠軍總是被置於DOM。

我最初（當這是從API拉入）認爲這個問題可能類似於這個question，但現在，我用我自己的testFilms重置，我可以肯定，我不覆蓋或設置任何id屬性，我不應該。

有沒有人有任何想法？

Answer 1

我認爲可能是因爲您將FilmView的el設置爲一個id，該id始終應該是唯一的，但是您將循環播放集合並不斷重置該el/id與當前模型，因爲每個FilmView都將具有相同的EL