首页 文章

backbone.js集合未正确删除视图中的项目

提问于
浏览 次
7

我在视图中从模型内的集合中删除项目时遇到一些问题 . 基本上模型/集合结构如下：

enter image description here

基本上，当我尝试从子项视图中的子项集合中删除项目时，它实际上从集合中删除了正确的项目 . 然而，当我来坚持主模型时，项目似乎仍然在集合中 .
这就是我的观点的结构：

enter image description here

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

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

唯一的区别在于子项目模型视图的创建，其中，由于视图和模板的可用性，我仍然传入主模型，但是我也传递了当前正在项目集合中的项目改性 . 看起来像这样：

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

在子项的视图init方法中，我执行以下操作：

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

正如我之前所说的，当我删除子项并检查由视图修改的集合时，我可以看到子项已从集合中删除，但是我坚持主模型已删除的子项重新出现 . 这使我相信，沿着这条线的某个地方可以克隆子项集合，这可以解释子项目的突然再现 .

我知道这是一个相当具体的问题，我不确定是否有可能通过我在这里提供的问题找到问题的原因，如果您需要更多信息，请告诉我 .

感谢你的帮助，

文森特

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

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

如果我控制台在SubItem视图中记录this.item.subItems集合，则在调用removeSubItem之后，我可以看到SubItem模型的实例已成功删除 . 在我调用主模型上的save方法之前，我在控制台上记录了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;
}
javascript backbone.js

2 回答

  • 1

    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()

    但是我按照我的方式写了它，以便对非咖啡用户更容易理解 .

    回复于
  • 2

    在不查看整个代码库的情况下，我认为您的结构可能略有错误 . 通常使用骨干我几乎不会将：el元素直接传递给视图 . 该视图负责生成它自己的el . 在渲染之后，我将新的view.el插入到DOM中 . 如下

    var subView = new FooView({ model: fooModel });

mainView.$(".list").append(subView.el);

    在上面的例子中，每个子视图都有一个骨干对象 . 如果你需要删除子视图，你不需要做一个选择器查询来找到它，你只需要在对象上调用remove方法，它就知道如何从dom中删除它自己 .

    或者更具体地说，subView处理自身的click事件，然后可以通过销毁它的关联模型然后调用remove本身来处理它 .

    回复于

相关问题