骨干集合视图仅呈现集合中的最后一个对象

Question

我正在尝试将 Collection View 的渲染输出放置到 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,
});

收藏视图

改编自我在 Backbone 上的 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();

从我目前对Backbone的理解来看，这应该做的是追加，使用FilmView中指定的模板将filmList集合中的每一项渲染到filmListView中的el中。

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

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

有人有什么想法吗？

Answer 1

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