javascript - Backbone.js Collection View 渲染重复项

Question

在我的 Backbone.js 应用程序中，我需要能够在集合中的现有项之间插入新项。到目前为止，我在网上找到的示例似乎都假设新项目应该附加到集合的末尾。这对我的目的不起作用，所以我选择在添加新项目时重新呈现整个集合。

但是，原始项目并没有从 View 中删除；相反，一组重复的项目被附加到列表的末尾。我可以通过使用 jQuery 在渲染之前清除项目来解决这个问题，但这似乎是错误的。

这是我现在拥有的:

Item = Backbone.Model.extend({
    price: null,
});

Items = Backbone.Collection.extend({
    model: Item, 
    initialize: function () {
      this.add(new Item({ price: '$0.50' }));
      this.add(new Item({ price: '$0.60' }));
      this.add(new Item({ price: '$0.70' }));
    }
});

ItemView = Backbone.View.extend({
    tagName: 'li',
    initialize: function () {
      this.model.bind('change', this.render, this);
    },

    render: function () {
      var item_template = _.template($('#item-template').html(), { item: this.model }); 
      this.$el.html(item_template);
      return this;
    },

    events: {
      "click .copy-item": "copyItem",
    },

    copyItem: function (event) {
      var index = itemlistview.collection.indexOf(this.model);
      itemlistview.collection.add(new Item, { at: index + 1 });
    },
});

ItemListView = Backbone.View.extend({
    el: '#item-rows',
    initialize: function () {
      _.bindAll(this);
      this.collection = new Items();
      this.collection.bind('add', this.render);
      this.render();
    },
    render: function () {
      // It works if I uncomment the line below
      //$('.item-row').remove();
      var self = this;
      this.collection.each(function (item) {
        self.$el.append(new ItemView({ model: item }).render().el);
      });
      return this;
    },
});

var itemlistview = new ItemListView;

这是一个 jsFiddle这说明了问题。

有没有更好的方法来处理这个问题？

Answer 1

在重新渲染整个内容时，您确实需要清除旧的渲染输入。

http://jsfiddle.net/Zk9NX/8/

改变项目 ListView

ItemListView = Backbone.View.extend({
    el: '#item-rows',
    initialize: function () {
      _.bindAll(this);
      this.collection = new Items();
      this.collection.bind('add', this.render);
      this.render();
    },
    render: function () {
      var self = this;
      this.$el.empty()
      this.collection.each(function (item) {
        self.$el.append(new ItemView({ model: item }).render().el);
      });
      return this;
    },
});