插入一个项目到一个集合Backbone.js的 [英] Inserting an item into a backbone.js collection

问题描述

有插入一个新的模型项目进入Backbone.js的收藏的中间，然后更新集合的查看包括在正确的位置上新的项目？

Is there a straightforward way to insert a new model item into the middle of a backbone.js Collection and then update the collection's View to include the new item in the correct position?

我工作的一个控制列表中添加/删除项目。每个列表项都有自己的模式和查看，我有一个查看为整个集合为好。

I'm working on a control to add/delete items from a list. Each list item has its own Model and View, and I have a View for the entire collection as well.

每个项目视图有一个复制按钮克隆该项目的模型并将其插入到集合中在被点击的项目下的索引位置。

Each item view has a Duplicate button that clones the item's model and inserts it into the collection at the index position below the item that was clicked.

插入项目到集合中简单，但我无法找出如何更新集合视图。我一直是这样的：

Inserting the item into the collection was straightforward, but I'm having trouble figuring out how to update the collection view. I've been trying something like this:

ListView = Backbone.View.extend({
    el: '#list-rows',
    initialize: function () {
      _.bindAll(this);
      this.collection = new Items();
      this.collection.bind('add', this.addItem);
      this.render();
    },
    render: function () {
      this.collection.each(this.addItems);
      return this;
    },
    addItem: function (item) {
      var itemView = new ItemView({ model: item }),
          rendered = itemView.render().el,
          index = this.collection.indexOf(item),
          rows = $('.item-row');

      if (rows.length > 1) {
        $(rows[index - 1]).after(rendered);
      } else {
        this.$el.append(rendered);
      }
    }
}

这是实施工作排序的，但我发现了奇怪的错误，当我添加一个新的项目。我敢肯定，我可以整理之，但是......

This implementation is sort of working, but I'm getting strange bugs when I add a new item. I'm sure I can sort those out, but ...

有一个在我头上的声音不断告诉我，有一个更好的方式来做到这一点。不必手动找出其中插入一个新的 ItemView控件似乎真的哈克 - shouldn't集合视图懂得已经重新描绘集合

There's a voice in my head keeps telling me that there's a better way to do this. Having to manually figure out where to insert a new ItemView seems really hacky--shouldn't the collection view know how to rerender the collection already?

有什么建议？

推荐答案

我做的通常方法是让的ListView 渲染每个 ItemView控件在渲染功能。然后我就绑定添加事件的渲染函数，就像这样：

The usual way I'm doing is let the ListView render each ItemView in its render function. Then I just bind the add event to the render function, like this:

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

每次你打电话 this.collection.add（someModel，{在：指数}），认为将相应重新渲染

这篇关于插入一个项目到一个集合Backbone.js的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！