如何在嵌套 Backbone 集合上“冒泡”事件?

2023-11-27

我有一个 Backbone 应用程序使用嵌套集合(至少我认为他们是这样称呼的)。

在我的具体情况下有tabs and subtabs,每个选项卡(模型)包含子选项卡(模型)的集合。

对于那些更熟悉代码的人,我将在下面写下我的模型和集合,以及子选项卡如何嵌套在选项卡模型中:

// Subtab Model
var Subtab = Backbone.Model.extend({
    defaults: { label: undefined }
});

// Subtabs Collection
var Subtabs = Backbone.Collection.extend({
    model: Subtab
});

// Tab Model
var Tab = Backbone.Model.extend({
    defaults: { label: undefined, subtabs: new Subtabs}
});

// Tabs Collection
var Tabs = Backbone.Collection.extend({
    model: Tab
});

现在,当我更改选项卡的属性时,它会触发Tab模型以及Tabs集合(很正常,对吧?),但是当我更改子选项卡的属性时,它会触发Subtab模型和Subtabs收藏(这也是正常的)但它不会冒泡到Tab模型(以及Tabs收藏)。

至少,我想应该是这样,因为模型内的集合已更改,因此模型已更改(但也许我错了,我没有得到它)​​。

关于如何使用 Backbone 实现这种行为有什么建议吗?


A change当属性更改时,Backbone 会触发事件set。正如您所看到的,该事件也会在集合上触发。但是,你的价值subtabs属性根本没有改变,它仍然是您在中创建的同一个对象defaults。如果你用过tab.set('subtabs', new Subtabs);你会得到一个change:subtabs事件,但您不想这样做。

我认为您必须在代码中执行某些操作才能在选项卡模型上触发新事件。

// Tab Model
var Tab = Backbone.Model.extend({
    defaults: { label: undefined, subtabs: new Subtabs},
    initialize: function(){
        // listen for change in subtabs collection.
        this.get('subtabs').on('change', this.subtabsChanged, this);
    },
    subtabsChanged: function(model) {
        // trigger new event.
        this.trigger('subtab:change', this, model);
    }
});

然后你可以监听该事件:

tabs.on('subtab:change', function(tab, subtab) { 
    console.log(tab.get('label'));
    console.log(subtab.get('label'));
});

我想这会起作用。但我想我想知道为什么您会监听选项卡集合以获取子选项卡的更改。在大多数情况下,最好只监听子选项卡集合本身的更改事件。

tab.get('subtabs').on('change', function(model){
    // do something with model, which is a Subtab.
});

EDIT: http://jsfiddle.net/phoenecke/DvHqH/1/

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

如何在嵌套 Backbone 集合上“冒泡”事件? 的相关文章

  • 未定义数组

    public onChange event Event let files event target files let list string console log files for var i 0 i lt files length
  • 如何在 MVC ScriptBundle 中将字符集设置为 .js 文件?

    我有 script js 文件 其中包含几个西里尔字母字符串 当我尝试使用像这样的标准链接加载它时 西里尔字母变成矩形 badCharsetCaracters 这解决了这个问题 如何使用 ASP NET MVC 4 Bundles 设置字符
  • CORS 请求在本地打开的 html 文件中被阻止

    我已经开始编写一个使用 JavaScript 显示数据的 HTML 文件 因为它应该尽可能简单地完成 所以我不想运行nodejs或任何其他本地http服务器 我刚刚在浏览器中打开了 HTML 文件 url 为 file home visu
  • 禁止 JavaScript/HTM 页面中的 ADO 安全警告

    我有一个功能齐全的网站存储在网络驱动器上 还有一个充当该网站数据库的 Access 数据库 由于缺乏服务器端代码 我被迫使用 JavaScript 创建 ADO ActiveX 对象来连接到数据库 这有效 我遇到的问题是 每当用户打开该站点
  • Websocket Javascript 的多个处理程序

    我们是否可以为同一个 webcocket 会话拥有多个处理程序 onmessage 方法 在下面的代码中 只有一个 onmessage 方法来处理来自客户端的消息 但是我们是否有可能为同一个 websocket 会话拥有多个 onmessa
  • 如何在JavaScript代码中获取JavaScript对象?

    TL DR I want parseParameter像下面的代码一样解析 JSON someCrawledJSCode是爬取的JavaScript代码 const data parseParameter someCrawledJSCode
  • Vue 组合 API 使用 VueAxios?

    I am in main js输入vue axios main js import createApp from vue import axios from axios import VueAxios from vue axios impo
  • 相同值零算法如何工作?

    我正在浏览 Javascript info 中的地图章节 其中有一个关于 SameValueZero 算法的链接 有人可以用简单的语言解释一下该算法是如何工作的吗 我尝试通过链接但找不到任何内容 See the 规格 https www e
  • 如果浏览器是 ie9,则执行某些 javascript

    我想在浏览器低于IE9的情况下执行jQuery中的某些代码 是的 我已经知道了 但我想要的是检查脚本标签内的这个条件并使用 jQuery document ready 您可以通过以下类别定位较旧的 Internet Explorer 版本
  • 如何在收到 fetch POST 请求的响应后将用户重定向到页面?

    我正在为一个 Web 应用程序编写代码 该应用程序使用 javascript 的 fetch api 向 node js 服务器发送 POST 请求 成功请求后 服务器会进行重定向响应 该重定向 URL 将在 fetch api 响应正文中
  • 如何自定义 Twitter Bootstrap 弹出窗口隐藏动画

    我想实现我自己的弹出隐藏动画 目前 我直接修改bootstrap js fn popover function option return this each function var this this data this data po
  • AJAX DJango 从多个文件字段获取文件

    我正在使用 AJAX 和 DJango 进行多个文件上传 但遇到问题 如何从字段输入获取文件并将其推送到data HTML
  • 如何使用贝塞尔曲线沿着路径制作图像动画

    My goal 沿着如下图所示的路径移动 动画图像 可能连接贝塞尔曲线 必须在 IE7 下工作 不要构建多个解决方案 我可以暂停 恢复移动图像 图像将沿着路径继续移动 重复 我考虑过什么 CANVAS IE7 8不支持 尚未测试explor
  • lambda 函数中的解构返回意外值

    当函数与解构一起使用时返回正确的预期值 k key1 v val1 k key2 v val2 k key3 v val3 console log JSON stringify k key1 v val1 z z1 k key2 v val
  • 组织 JavaScript 代码

    我正在制作一个 JavaScript 应用程序 通常我所做的是制作不同的模块并获取用户输入或单击事件 document ready 功能 这对于小型应用程序来说效果很好 但是当我遵循相同的模式时 我的意思是获取点击事件 document r
  • 带有阻塞代码的 setTimeout 行为

    这是我的测试代码 小提琴here http jsfiddle net Xvh55 console log Before wait setTimeout function console log Yo 1000 var start Date
  • 如何使用Ajax和JSON制作下拉菜单?

    这是我用来显示类别菜单的代码OpenCart具有不同的级别 它有效 但每次点击后它都会产生越来越多的XHR finished loading POST and XHR finished loading GET有时通过单击来停止页面
  • 预压缩的 gzip 在 Chrome 上崩溃,为什么?

    我在我的网站上提供预压缩的 CSS 和 JS 文件 以及 IE6 8 和 FF 与我的 htaccess 文件完美配合 Compressed files RewriteCond HTTP Accept Encoding gzip AddEn
  • 创建圆形鼠标悬停饱和效果

    我有两个版本的图像 去饱和版本和全彩版本 我想要实现的是悬停效果 其中将鼠标悬停在去饱和图像上会显示图像的彩色版本的圆圈 这有点像将聚光灯照射在饱和度降低的图像上以显示其颜色 然后 当您将鼠标移开时 它会淡回到不饱和状态 我知道我可能可以使
  • 正确使用 QUnit throw() 断言?

    使用 QUinit 的throw https api qunitjs com throws 断言我想测试是否抛出错误以及错误消息 我有以下功能 Error function for Node param String msg Error m

随机推荐

  • 身份验证后读取数据时 Firebase 权限被拒绝

    我是 Firebase 新手 我使用电子邮件和密码对用户进行了身份验证 final Firebase ref new Firebase https app firebaseio com ref authWithPassword email
  • C++:宽字符输出不正确?

    我的代码基本上是这样的 wstring japan L 日本 wstring message L Welcome Japan is message japan wprintf message c str 我希望使用宽字符串 但我不知道它们是
  • Laravel Carbon 按月分组

    谁能看到我做错了什么吗 我试图输出所有月份 但将它们分组 以便它们是唯一的 months NewsItem select DB raw MONTH created at as month gt groupBy month gt get re
  • 为什么每次重新启动应用程序时,我的蓝牙设备的地址都会发生变化?

    我正在使用这个对 Android 的蓝牙 LE 功能进行一些简单的扫描 广告测试示例代码 我正在使用三星 6 和 Nexus 9 进行测试 出于某种原因 如果我让应用程序在三星上运行并在 Nexus 上重新启动应用程序 则下次三星设备找到其
  • 实例化 Injectable 类时未调用 ngOnInit

    为什么不是ngOnInit 当Injectable类解决了吗 Code import Injectable OnInit from angular2 core import RestApiService RestRequest from r
  • WordPress 将“&&”更改为“&&”

    我正在使用PHPinclude 函数来包含静态PHP and JS我的 WordPress 页面中的内容 通过 ezPHP 插件实现 PHP 工作正常 但 JS 不行 我收到 非法字符 错误 每个实例 正在更改为 html 代码 我尝试将其
  • 如何判断您要从 WinForms 选项卡控件中移动到哪个选项卡?

    我需要确定用户在切换选项卡时来自和前往哪个选项卡 并可能取消切换 我尝试过取消选择 取消选择 选择 选定事件 所有这些事件都显示 e TabPageIndex 与 sender SelectedIndex 相同 是否有一个事件或属性可供我使
  • 类型擦除:Java 与 C# [重复]

    这个问题在这里已经有答案了 可能的重复 C 与 Java 泛型 Java use 类型擦除 while C 在运行时保留类型信息 该设计的语言行为有何实际差异 类型擦除存在很多问题 它勾起了不好的回忆 我从 1 6 开始就没有使用过 Jav
  • WebRTC的RTCDataChannel在iOS中的实现

    我在用ISBX apprtc ios视频聊天实现代码 这在 iPhone 和模拟器中完美运行 我想在两个对等点之间发送文本 字符串数据 并且我正在使用RTCDataChannel class 以下是我的实现 我无法建立连接 它总是给出状态k
  • 如何在不使用代码的情况下使用约束 AutoLayout 来指定横向与纵向的不同布局?

    我有一个带有登录屏幕的 iPad 应用程序 登录控件包含在 UIView 中 当 iPad 处于纵向方向时 我的登录 UIView 靠近应用程序的底部和中心 几乎就在键盘所在位置的正上方 公司徽标位于顶部居中的 UIImageView 中
  • ASP.NET MVC 4应用程序调用远程WebAPI

    我过去创建过几个 ASP NET MVC 应用程序 但以前从未使用过 WebAPI 我想知道如何创建一个简单的 MVC 4 应用程序 通过 WebAPI 而不是通过普通的 MVC 控制器来执行简单的 CRUD 操作 诀窍在于 WebAPI
  • Sharepoint API - 如何从 ASP.NET Web 应用程序将文件上传到 Sharepoint 文档库

    我是 Sharepoint Server 的新手 我们有任何实用程序可以从 ASP NET 应用程序上传文件吗 您能提供您宝贵的答案吗 您可以编写一些自定义代码来执行此操作 如果您位于同一服务器上或使用 Web 服务 则可以使用 Share
  • 是否可以转换参数包中的类型?

    是否可以转换参数包的类型并传递 例如 鉴于以下情况 template
  • 不存在具有键“xxx”的“IEnumerable”类型的 ViewData 项

    Stack Overflow 上有几篇关于此问题的帖子 但没有一个答案似乎可以解决我当前情况下的问题 我有一个页面 其中有一个表格 每行都有多个文本字段和一个下拉列表 所有下拉列表都需要使用相同的 SelectList 数据 因此我将其设置
  • 在共享主机上为 32 位 Linux 编译 git

    我需要在廉价的共享主机上设置 Git 客户端 并使用一个不知名的 32 位 Linux 发行版 GCC 不可用 所以我无法在服务器上编译它 我确实有两台其他 64 位 Linux 服务器和一台 OSX 笔记本电脑可供使用 我可以尝试在其上交
  • Gnuplot,如何*跳过*丢失的数据文件?

    根据各种因素 我可能没有 1 个或多个不存在的数据文件 在预定义的 gnuplot 绘图指令中引用 当这种情况我得到 警告 跳过不可读的文件 这会取消其余指令 有什么方法可以让 gnuplot 跳过任何丢失的数据文件并绘制所有现有的数据文件
  • 为什么我收到“错误:无法推送某些参考”?

    我有一个远程 git 存储库和一个我使用的本地存储库 每当我在本地进行任何更改时 我都会将它们推送到远程 然后我有时会在远程文件上执行 git commit 以存储远程文件上的更改 我根本不直接编辑远程存储库 我只是提交更改 我是一名单一开
  • Android堆碎片策略?

    我有一个 OpenGL Android 应用程序 它使用大量内存来设置复杂的场景 这显然会导致严重的堆碎片 即使不存在内存泄漏 也不可能在不因碎片而耗尽内存的情况下销毁和创建应用程序 碎片肯定是问题 而不是泄漏 这会导致一个主要问题 因为
  • python 3.x ImportError:没有名为“cStringIO”的模块

    我该如何解决ImportError No module named cStringIO 在Python 3 x下 来自 Python 3 0 变更日志 StringIO 和 cStringIO 模块消失了 相反 导入 io 模块并分别使用
  • 如何在嵌套 Backbone 集合上“冒泡”事件?

    我有一个 Backbone 应用程序使用嵌套集合 至少我认为他们是这样称呼的 在我的具体情况下有tabs and subtabs 每个选项卡 模型 包含子选项卡 模型 的集合 对于那些更熟悉代码的人 我将在下面写下我的模型和集合 以及子选项