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