Backbone Collection View仅渲染集合中的最后一个对象

Question

我正在尝试将Collection View的渲染输出放到dom上。但是，在过程结束时，只有页面中显示集合中的最后一个对象。

我在视图上设置了一个事件处理程序，以便在单击某个项目时，它会被注销title。每当我点击放置在Dom上的这个单个元素时，就会记录每个对象的标题，即使只显示了一个，所以每个处理程序都应用于最终元素但是以某种方式注销了正确的标题。

有谁知道如何渲染集合中的每个项目而不仅仅是最后一个项目？以下是我的代码快速浏览。

最终目标是列出每部电影的名称。

模型

首先，定义模型 - 这里没有什么令人兴奋的

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

查看

以下是我为电影模型制作的View的简化版本

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,
});

集合视图

改编自我参加Backbone的代码学课程

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();

根据我对Backbone的理解，到目前为止，应该做的是使用FilmView中指定的模板追加，将filmList集合中的每个项目渲染到filmListView中的el中。

然而，实际发生的事情是最终的标题总是放在DOM上。

我最初（当它从API中提取时）认为该问题可能与此question类似，但是现在我正在使用我自己的testFilms进行重置，我可以肯定我不会压倒一切或设置我不应该的任何id属性。

有人有什么想法吗？

Answer 1

我认为你可能会将FilmView的el设置为一个id，它应该始终是唯一的，然后你循环遍历该集合并不断重置当前模型的el / id，因为每个FilmView都会有同样的el