我在 View 中从模型内的集合中删除项目时遇到了一些问题。基本上模型/集合结构如下:

基本上，当我尝试从子项目 View 中的子项目集合中删除一个项目时，它实际上从集合中删除了正确的项目。然而，当我开始坚持主模型时，该项目似乎仍在收藏中。
这是我的观点的结构:

主视图插入主模型所需的 DOM 节点，主模型为项目模型等创建新 View 。所有 View 都将主模型作为模型选项，如下所示:

new App.Views.MainModelView({
  model : this.model,
  el : $('#nodeID')
})

唯一不同的是子项模型 View 的创建，由于 View 和模板的可重用性，我仍然传入主模型，但是我也传入了项集合中的项目前正在修改中。看起来像这样:

new App.Views.ItemView({
  model : this.model,
  item : this.selectedItem,
  el : $('#nodeID')
});

在子项的 View 初始化方法中，我执行以下操作:

this.item = (this.options.item) ? this.options.item : this.model;

要从子项集合中删除子项，我会这样做:

removeSubItem : function(e) {
  // get the id of the sub-item to be removed
  var id = $(e.target).closest('tr').attr('data-id');
  if (!id) throw  "Could not retrieve data id";
  // retrieve the sub-item from the collection
  var subItem = this.item.subItems.get(id);
  // remove the sub-item from the collection
  this.item.subItems.remove(subItem);
},

正如我之前所说，当我删除子项并检查由 View 修改的集合时，我可以看到该子项已从集合中删除，但是我将删除的子项保留在主模型中重新出现。这让我相信，子项集合可能会在沿线的某个地方被克隆，这可以解释子项的突然重新出现。

我知道这是一个相当具体的问题，我不确定是否可以通过我在此处提供的内容找到问题的原因，如果您需要任何更多信息，请告诉我。

谢谢你的帮助，

文森特

========== 编辑 ============

为了回答下面的一些问题，让我概述一下我遇到此问题的范围:

如果我在 SubItem View 中控制台记录 this.item.subItems 集合，在调用 removeSubItem 之后，我可以看到 SubItem 模型的实例已成功删除。 在我调用主模型上的保存方法之前，我控制台记录了 toJSON 函数的返回。在这一点上，我遇到了以前删除的实例在集合中“返回”的问题。我一直在使用 Wireshark 和 Google chrome 的开发人员控制台监控客户端和服务器之间的流量，并且没有调用服务器来刷新任何模型。

SubItem 集合的 toJSON 方法如下所示:

toJSON : function() {
  App.log(["SubItem::collection::toJSON", this], "info");
  var json = {};
  // make sure the key for each SubItem is the primary key
  this.each(function(subItem) {
    json[subItem.get('id')] = subItem.toJSON();
  });

  return json;
}

最佳答案

Backbone.js 不支持嵌套集合/模型，它们不提供保存支持(参见 http://documentcloud.github.com/backbone/#FAQ-nested)。您必须在任何具有子集合的模型上覆盖 toJSON。我遇到过这种情况一百万次。如果你有类似的东西(在 coffeescript 中):

class MainModel extends Backbone.Model

    itemCollection: ->
        @_itemCollection ?= new ItemCollection(@get('itemCollection'))


class ItemCollection extends Backbone.Collection

    model: ItemModel


class ItemModel extends Backbone.Model

    subCollection: ->
        @_subCollection ?= new SubCollection(@get('subCollection'))


class SubCollection extends Backbone.Collection

    model: SubModel


class SubModel extends Backbone.Model


mainModel = new MainModel(json)

然后为了让 mainModel.save() 工作，您需要覆盖 MainModel 和 ItemModel 上的 toJSON，例如:

class MainModel extends Backbone.Model

    itemCollection: ->
        @_itemCollection ?= new ItemCollection(@get('itemCollection'))

    toJSON: ->
        return _.extend(@attributes, {itemCollection: @itemCollection().toJSON()})


class ItemModel extends Backbone.Model

    subCollection: ->
        @_subCollection ?= new SubCollection(@get('subCollection'))

    toJSON: ->
        return _.extend(@attributes, {subCollection: @subCollection().toJSON()})

我用 coffeescript 编写了示例，因为它比 javascript 简洁得多。如果您需要任何帮助来理解它，请直接询问。

希望这对您有所帮助!

--- 注意 ---

从技术上讲，在 coffeescript 中，toJSON 方法可以简单地是:

toJSON: ->
    _.extend @attributes, itemCollection: @itemCollection().toJSON()

但我按照自己的方式写的，以便非 coffeescripters 更容易理解。

关于javascript - backbone.js 集合未正确删除 View 中的项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6677815/