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

2024-06-28

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

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

主视图插入主模型所需的 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);
},

正如我之前所说,当我删除子项并检查视图修改的集合时,我可以看到子项已从集合中删除,但是随后我保留主模型,删除的子项重新出现。这让我相信,在某个地方,子项目集合可能会被克隆,这可以解释子项目突然重新出现的原因。

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

感谢你的帮助,

Vincent

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

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

如果我在 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;
}

Backbone.js 对嵌套集合/模型的支持不存在,并且它们不提供保存支持(请参阅http://documentcloud.github.com/backbone/#FAQ-nested http://documentcloud.github.com/backbone/#FAQ-nested)。您必须在具有子集合的任何模型上覆盖 toJSON。我已经遇到这种情况一百万次了。如果你有类似的东西(在咖啡脚本中):

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

但我这样写是为了让非咖啡脚本人员更容易理解。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • AS3中如何知道一个对象是否是动态的

    在Action Script 3中 您可以编写一个定义动态对象的类 MovieClip和Object是两个例子 这个对象可以在运行时修改 我想知道是否有某种方法 当然是在运行时 知道某个对象是否是动态的 PS 没有做这样的事情 functi
  • 更改分配新变量的默认环境

    我经常想在全局环境下的一个环境中创建很多变量 这可以通过以下方式轻松完成envir论证sys source 如果由正在获取的文件创建的所有变量都应该进入单个环境 但我通常使用创建变量集的文件 一组应该进入一个环境 另一组应该进入另一个环境
  • pymc3 中均匀分布的区间变换是什么?

    我注意到 当在 pymc3 中使用均匀分布时 采样器也会扫描 interval参数也是如此 除非指定了转换 例如 with fitModel6 normMu pm Uniform normMu lower 0 upper 1000 不仅会导
  • pandas 数据框到键值对

    将以下 pandas 数据帧转换为键值对的最佳方法是什么 Before datetime name qty price 2017 11 01 10 20 apple 5 1 2017 11 01 11 20 pear 2 1 5 2017
  • 使用 python 3.6 和 anaconda 3.6 在 Windows 10 上安装 opencv

    如何使用python 3 6和anaconda 3 6安装opencv I tried conda install c https conda binstar org menpo opencv3 但我收到以下错误 Unsatisfiable
  • 如何在 Flex 中使用 FTP?

    我是 Flex 环境的新手 特别是 flex3 我已经研究了1个星期了 我有一个项目 我需要FTP来上传和下载mp3和图片文件 最好的开始方式是什么 如果您的意思是在 Flex 中创建 FTP 客户端 那么它已经完成了 FlexFTP ht
  • 如何为二维数组动态分配连续的内存块

    如果我像这样分配一个二维数组整数a N N 它将分配一个连续的内存块 但如果我尝试像这样动态地执行此操作 int a malloc rows sizeof int for int i 0 i lt rows i a i malloc col
  • 拖动时如何改变光标?材质 CDK 拖放

    使用 Material CDK 库中的拖放行为 我尝试在拖动cdkDrag元素 例如 在这个堆栈闪电战 https stackblitz com edit angular b8kjj3光标是grab悬停时 我想把它改为grabbing拖动时
  • 在mysql中使用smallint数据类型而不是int真的可以节省内存吗?

    在 mysql 表中使用 Smallint 数据类型而不是常规 int 是否真的可以提高内存使用率 无论如何 硬件不会为所有数据分配完整的 64 位字大小吗 如果它不分配完整的字 那么我们是否会看到由于必须从内存中分配的 64 位字中解析出
  • Python 和 SQLite:插入表

    具有以下表架构 tablename name varchar 100 age int sex char 1 有一个list有 3 行 每行代表一个表行 row1 laks 444 M row2 kam 445 M row3 kam 445
  • 微服务数据复制模式

    在微服务架构中 我们通常有两种方式让2个微服务进行通信 假设服务 A 需要从服务 B 获取信息 第一个选项是远程调用 通常通过 HTTPS 同步 因此服务 A 查询服务 B 托管的 API 第二种选择是采用事件驱动架构 其中服务 B 的状态
  • Eval 不适用于未展开的宏引用

    在 Common Lisp 中我可以这样做 src gt defmacro 宏 hello 你好 eval 宏 你好 没问题 在 Clojure 中 defmacro 宏 你好 你好 eval 宏 你好 给我一个错误 我做错了什么吗 Clo
  • 图标到图像 - 透明度问题

    我正在尝试在 Richtextbox 中构建类似文件列表的树视图 它应该看起来像一个资源管理器树视图 我的代码能够调整图标大小 但缺少透明度 浅灰色背景而不是透明度 我需要在这里改变什么 是不是图片格式不对 有没有更好的方法将图像添加到 R
  • 运行此 AVD 需要 Intel HAXM,但我已经安装了它

    我一直在网上寻找这个问题 似乎没有人遇到和我一样的问题 我刚刚下载了 Android Studio 来开始学习 Kotlin 在遵循 Google 的教程步骤后 我收到以下消息 在此输入图像描述 https i stack imgur co
  • Flash 和 HTTP 状态代码 207

    让 flash 识别有效的 HTTP 响应代码 207 时遇到一些问题 奇怪的是 到目前为止 这似乎只发生在 FireFox 中 在 Chrome 中工作得很好 这是生成以下错误的代码 它似乎在 FlashBug 中返回 0 的 HTTP
  • 如何从任何页面的 javascript 访问 google chrome 扩展

    我试图弄清楚如何从普通网页调用我的分机 我找到的所有文档似乎都是用于扩展之间或内容脚本和扩展之间的通信 非常感谢任何指点 我认为您应该制作一个内容脚本 将一个对象注入到调用您的扩展的页面中 创建一个内容脚本 将 YourExt js 注入每
  • ng-grid cellTemplate 不适用于包含的 CUSTOM_FILTERS

    当在列定义中包含 cellTemplate 时 如果该 cellTemplate 包含 CUSTOM FILTERS 则会导致 Angular 呕吐 错误 语法错误 标记 CUSTOM FILTERS 是从 CUSTOM FILTERS 开
  • Matlab交换

    我正在尝试创建一个函数 将矩阵中的特定数字与同一矩阵中的特定数字交换 例如 如果我从 A 1 2 3 1 3 2 开始 我希望能够创建 B 2 1 3 2 3 1 只需告诉 matlab 将 1 与 2 交换即可 任何意见 将不胜感激 谢谢
  • Air 2 ServerSocket跨域问题

    我希望通过 ServerSocket 类创建一个 Air 2 服务器 您将在下面的代码中找到有关它的示例 限制条件 服务器必须在空中 客户端必须通过网络浏览器显示 客户端使用Web浏览器显示 因此当客户端想要与Air服务器建立连接时 Fla
  • backbone.js 集合未正确删除视图中的项目

    在视图中 我在从模型内的集合中删除项目时遇到一些问题 基本上模型 集合结构如下 基本上 当我尝试从子项目视图中的子项目集合中删除项目时 它实际上会从集合中删除正确的项目 然而 当我坚持主模型时 该项目似乎仍在集合中 这就是我的观点的结构 主