Backbone.js的集合不能正常鉴于删除项目 [英] backbone.js collection not properly removing item in view

问题描述

我有一些麻烦，从集合中删除项目的模型里面视图时。基本上，该模型/收藏结构如下：

I'm having some trouble deleting an item from a collection inside a model when in a view. Basically the model/collection structure is the following:

基本上，当我尝试删除该子项集合中的子项的项目查看​​它实际上从集合中删除正确的项目。然而，当我来到坚持主模型的项目似乎还是收藏。结果
这是我的观点是在如何构建的：

Basically when I try to remove an item from the sub item collection in the sub item view it actually removes the correct item from the collection. However when I come to persisting the main model the item seems to be still in the collection.
This is the how my views are structured:

主视图插入由主模型所需的DOM节点，其中主力机型创造了等等。所有的意见越来越主力机型像这样的模型选择的项目模型的新观点：

The main view inserts the DOM nodes required by the main model, and them main model creates a new view for the item model etc. All views are getting the main model as model option like so:

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

唯一的区别是在创建子项模型视图，在那里，由于重新视图和模板的可用性，我还通过在主要模式，但是，我也通过在项目的项目集合中目前正在修改。它看起来像这样：

The only difference is in the creation of the Sub-item model view, where, due to re usability of the view and template, I still pass in the main model, however I also pass in the item in the item collection that is currently being modified. Which looks like this:

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

在该分项的看法init方法我做到以下几点：

In the sub-item's view init method I do the following:

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

As I said earlier when I remove the sub-item and I inspect the collection modified by the view I can see that the sub-item has been removed from the collection, however then I persist the main model the removed sub-item re-appears. The leads me to believe that somewhere along the line the sub-item collection might be cloned which could explain the sudden reappearance of the sub-item.

正如我刚才所说，当我删除的分项目，我检查了看法我可以看到，该分项已经从集合中删除修改的集合，但是后来我坚持的主力车型已删除的子项再次出现。该使我相信沿线的分项目集合可能被克隆这可以解释该分项的突然再现。某处

I know this is a fairly specific problem and I'm not sure if it is possible to get to the cause of the problem with what I have provided here, if you need any more information please let me know.

我知道这是一个相当具体的问题，我不知道是否有可能得到与我在这里提供，如果您需要任何更多信息，请让我知道这个问题的原因。

Thanks for all your help,

感谢你的帮助，

文森特

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

To answer some of the questions below let me outline the scope in which I am experiencing this issue:

要回答一些问题下面让我概括的范围中，我遇到这个问题：

If I console log the this.item.subItems collection in the SubItem view, after removeSubItem was called, I can see that the instance of the SubItem model has been removed successfully. Before I call the save method on the main model I console log the return of the toJSON function. At this point I am experiencing the problem that the previously removed instance is 'back' in the collection. I have been monitoring the traffic between client and server with both Wireshark and Google chrome's developer console and there is no call to the server to refresh any of the models.

如果我安慰记录this.item.subItems集合中的分项来看，removeSubItem被称为后，我可以看到分项目模型的实例已成功删除。
之前我所说的保存方法上的主力机型我控制台日志中的toJSON函数的返回。在这一点上我遇到了previously删除的实例集合中的后退的问题。我一直在监测流量客户端和服务器之间既Wireshark的和谷歌Chrome的开发者控制台，并没有对服务器没有呼叫刷新的任何机型。

The toJSON method for the SubItem collection looks like this:

对于分项征收的方法的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中）：

Backbone.js support for nested collection/models is non-existent, and they provide no saving support (see http://documentcloud.github.com/backbone/#FAQ-nested). You have to override toJSON on any model with a subcollection. I've run into this scenario a million times. If you have something like (in 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（）工作，你需要覆盖的toJSON上MainModel和ItemModel，如：

Then in order for mainModel.save() to work, you need to override toJSON on MainModel and ItemModel, like:

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的更准确。如果你需要的任何帮助决策意识，请只问。

I wrote the example in coffeescript because it's much more concise than javascript. If you need any help making sense of it, please just ask.

希望这有助于！

---注意---

从技术上讲，在CoffeeScript的，所述的toJSON方法可以简单地是：

Technically, in coffeescript, the toJSON methods could simply be:

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

但我写的我也更加理解非coffeescripters的方式。

But I wrote it the way I did to be more understandable to non-coffeescripters.

这篇关于Backbone.js的集合不能正常鉴于删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！