如何挂钩异步 Backbone 事件来显示 HTML

2024-03-26

我想做的是调用数据库,然后以 HTML 形式显示结果。我一切正常(数据从数据库返回得很好),除了我无法弄清楚如何显示数据。

我知道fetch()是异步的,但我不确定如何将其连接到我的集合视图中。这是我的骨干:

    (function() {
        window.App = {
            Models: {},
            Collections: {},
            Views: {},
            Router: {}
        };

        window.template = function(id) {
            return _.template( $('#' + id).html() );
        };

        App.Models.Main = Backbone.Model.extend({
            defaults : {
                FName: ''
            }
        });

        App.Collections.Mains = Backbone.Collection.extend({
            model: App.Models.Main,
            initialize: function(mains) {
                this.fetch({success: function(main) {
                    $('#web-leads').html(main);
                }});
            },
            url: '../leads/main_contact'
        });

        App.Views.Mains = Backbone.View.extend({
            tagName: 'ul',
            render: function() {
                var ul = this.collection.each(this.addOne, this);
                return ul;
            },
            addOne: function(main) {
                var mainC = new App.Views.Main({ model: main});
                this.$el.append(mainC.render().el);
                return this;
            }
        });

        App.Views.Main = Backbone.View.extend({
            tagName: 'li',
            template: template('mainContactTemplate'),
            render: function () {
                this.$el.html(this.template(this.model.toJSON()));
                return this;
            }

        });

        main = new App.Views.Main();
        mains = new App.Collections.Mains(main);

    })();

我需要能够打电话$('#web-leads').html()返回值mains。我怎么做?


Backbone 中此类事情的一般模式是:

  1. 创建模型或集合
  2. 将该模型/集合传递给视图
  3. 该视图在模型/集合上注册一个事件处理程序
  4. 模型/集合触发 AJAX 请求(可能是响应fetch call)
  5. 视图的事件处理程序被触发
  6. 视图的事件处理程序更新页面

因此,由于 mu 太短,建议您最好的选择是遵循此模式并让您的视图将处理程序绑定到您的集合reset event.

不过值得一提的是reset并不总是您想要绑定的事件。例如,您可能不想响应 AJAX 请求,除非它更改了模型的属性“X”。在这种情况下,您可以改为绑定change:X,然后只有当 AJAX 响应更改 X 时才会触发您的处理程序。

要查看所有可能的选项,请参阅:

http://documentcloud.github.com/backbone/#Events-catalog http://documentcloud.github.com/backbone/#Events-catalog

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

如何挂钩异步 Backbone 事件来显示 HTML 的相关文章

  • 未捕获的类型错误:无法调用 null 的方法“替换”

    如果我在 Chrome JS 控制台上输入 template pranks list html 它也可以工作 gt gt template pranks list html function a return e call this a b
  • 带有通配符的主干事件

    有没有办法监听命名空间的所有事件 所以当我听到这样的事件时 app vent on notification id function type console lof type 它将监听所有这样的事件 app vent trigger no
  • 使用 $.html() 时如何提高渲染性能

    我正在研究骨干demo app https jsfiddle net o75r7fu9 8 显示推文列表 当我用不同的数据替换所有 推文 时 我使用以下命令清除列表 html render function item table html
  • 保护我的 Node.js 应用程序的 REST API 安全?

    我可以在 REST API 上获得一些帮助 我正在编写一个 Node js 应用程序 它使用 Express MongoDB 并在客户端使用 Backbone js 在过去的两天里 我一直在努力解决所有这些问题 但运气不佳 我已经查过了 保
  • 如果 cookie 未发送到服务器,则可以安全地将访问令牌存储在客户端 cookie 中

    我正在开发一个主干应用程序 其中包含 Laravel 后端的 REST api 这意味着我使用从社交媒体 例如 Facebook Google 等 收到的访问令牌对每个请求进行身份验证 我的计划是存储用 Javascript 生成的客户端
  • 主干表视图消耗行视图 - 如何构造?

    我有一组模型希望在表格视图中呈现 每个模型应由表中的一行表示 并且该行应使用模板生成 我应该能够将事件处理程序附加到该行 例如单击 在事件发生时发出有关与该行关联的模型的一些特定信息 我见过类似的事情的一种常见方法是将每一行分解到它自己的视
  • 车把模板的文件扩展名

    我更改了车把模板的扩展名 并在调用 handlebarjs 编译函数的函数中引用了相同的扩展名 它工作得很好 没有任何问题 但我很好奇是否还有其他人尝试过 如果您认为这可能会因任何原因导致问题 请告诉我 出于某种原因 我觉得扩展名 hand
  • Backbone.Marionette 在路由更改时更改区域

    我的应用程序有一个主区域 有时主区域中会有一些应可通过 URL 访问的子区域 主要区域内容由应用程序路由器的功能更改 因为他知道主要区域 但是子视图中的临时区域呢 例如网址 docs将显示文档链接列表以及 doc id应在列表旁边显示文档的
  • 需要帮助了解主干中嵌套视图的基础知识

    我一直在阅读有关backbone js 中嵌套视图的大量内容 并且了解其中的很多内容 但仍然令我困惑的一件事是 如果我的应用程序有一个 shell 视图 其中包含页面导航 页脚等子视图 这些子视图在使用应用程序的过程中不会改变 那么我是否需
  • 与 jQuery 配合使用的backbone.js 替代品?

    有没有像backbone js这样的东西的替代品 它为你的前端javascript提供了一些框架 结构 但没有任何不需要的依赖项 并且与jQuery更紧密地结合在一起 您需要一个易于使用的 MVC 框架吗 因为Sammy js http s
  • 主干关系有许多最佳实践

    我是 Backbone 关系新手 我不确定使用 HasMany 的正确方法是什么 我有一个Parent模型有很多children 许多 是指成千上万的孩子 为了避免性能问题 我通过外键查询子项 child parent 1 而不是创建一个巨
  • 获取集合时的 ​​Backbone.js 进度条

    我想在用新内容更新应用程序时显示进度条 我想最好的办法是在集合上调用 fetch 时执行此操作 我获取的内容主要是图像 视频海报等 但我只获取链接 而不是 base64 字符串或大的东西 我想做的是在获取图像链接时用进度条覆盖屏幕 渲染视图
  • 每次分页获取后将数据附加到同一集合

    我正在尝试使用主干填充 Instagram 图像 我基本上有以下3个模型 用户模型存储与 Instagram 相关的所有用户信息 App Models User Backbone Model extend defaults id acces
  • Backbone Marionette CompositeView 排序列表 - 在添加时呈现额外的模型

    这是小提琴 http jsfiddle net QhQ8D 10 http jsfiddle net QhQ8D 10 代码在下面 制作一个聊天应用程序 需要一个排序的 连接的用户列表 名称上带有比较器的图形集合连接到 CompositeV
  • 将 RequireJS 与遗留代码结合使用

    我正在处理一个非常大的项目 该项目使用 包含带有脚本标记的 javascript 文件的旧版 JSP 页面 使用其他 javascript 模块而不使用 RequireJS 的骨干模型和视图 现在 我们希望开始将 RequireJS 与 j
  • 引发一系列事件 Backbone event:name

    extend object Backbone Events object on myalert one function msg document body innerHTML eve1 msg msg name this name con
  • 在 Node js 应用程序中加载backbone.js

    我正在使用node js 和backbone 来构建网络应用程序 Backbone 是我的软件包要求的一部分 我之前使用过 Rails 和 Backbone 辅助 gem 非常适合将需要到达客户端的所有资产 js 文件 拼凑在一起 话虽如此
  • 如何检查侧边栏视图是否已经在主干中渲染?

    通常 用户通过主页进入网站 然后我在那里渲染侧边栏视图 接下来 用户单击链接 路由器呈现另一个视图并替换原始内容视图 侧边栏视图不会重新渲染 当用户在子页面上单击刷新时 侧边栏不会呈现 如何检查视图是否存在并且已渲染 划分责任并坚持下去 不
  • Backbone Marionette,复合视图初始化两次

    我正在使用一个复合视图 它的 el 上调用了 dialog 然后 复合视图列出集合中的项目 现在我尝试了多种方法来渲染集合项 在将其附加到视图之前和之后从复合视图外部获取 在视图内部获取 从我的服务器脚本预加载集合等 一切似乎都有效 但出现
  • Backbone:仅当事件侦听器尚不存在时才添加

    换句话说 如何找到已收听的事件列表 我正在使用 Backbone on 和 Backbone trigger 在两个彼此不了解的视图之间进行通信 但是 添加侦听器的视图实际上是一个 项目视图 一个集合 所以我添加了许多侦听器 因此我想首先检

随机推荐

  • 每条路由的 NancyFx 身份验证

    从我在源代码中看到的 RequiresAuthentication 对整个模块进行身份验证检查 有什么办法可以按路线执行此操作吗 我有同样的问题 然而事实证明RequiresAuthentication在模块级别和路由级别都有效 为了演示
  • CollapsingToolBarLayout 无法实例化

    在过去的几个月里 我一直在使用折叠工具栏布局 没有任何问题 然而今天 每当我打开 xml 文件时都会弹出此错误 确切的错误如下 以下类无法实例化 android support design widget CollapsingToolbar
  • Angular 通用 - 为客户端缓存的服务器端请求

    我看过很多关于在角度通用应用程序中缓存客户端数据的文章 因此它不会重复客户端上已在服务器上解析的请求 我只是不明白数据如何从服务器传输到客户端 我是否将 JSON 注入到预渲染的 HTML 中 还是缺少其他内容 从 Angular 5 开始
  • 如何获取已安装打印机的列表?

    我正在寻找获取已安装打印机列表的可能性 我在 Windows 操作系统中使用 JDK 1 6 有谁知道解决方案吗 先感谢您 只是想添加一个小片段 import javax print class Test public static voi
  • Xcode 4 - 一键构建多个设备?

    在 Xcode 4 中 是否可以通过某种方式进行设置 以便通过单击左上角的 运行 按钮 可以一键将 Xcode 构建到多个设备 这会节省很多时间 不断地点击 构建到iPhone 然后构建到 iPod 然后依次点击 构建到iPad 一键完成所
  • 等待 puppeteer 中的过渡结束

    我正在尝试使用 Puppeteer 测试网站 不幸的是 我在单击工具栏中的元素时遇到问题 工具栏使用 CSS 过渡来优雅地滑入页面 我的代码失败 因为我在页面仍在动画时单击元素将出现的位置 我使用超时作为解决方法 但必须有一个更优雅的解决方
  • 如何选择字段总和大于 MongoDB 中的值的位置

    使用 MongoDB 我将如何编写这个常规 SQL 语句 SELECT FROM table WHERE field1 field2 field3 gt 1 我一直在搞乱 group project add 等 我觉得我在围绕解决方案跳舞
  • 如何额外保护已使用 OAuth 2.0 访问令牌的 REST 服务?

    我有以下 REST 服务 An 聚合器暴露于外界的服务 它由用户 OAuth 2 0 访问令牌保护 这聚合器称为Internal服务 The Internal服务是在网络级别的not暴露于外界 它还由同一用户 OAuth 2 0 访问令牌保
  • 如何在 Delphi 中检测等宽字体?

    如何在 Delphi 中检测等宽字体 TFont Pitch应该fpFixed我想 但它对我来说不适用于 Delphi XE4 var Font TFont begin Font TFont Create Font Name Courier
  • Android 上的“上下文”是什么?

    在Android编程中 到底什么是Context类以及它的用途是什么 我在开发者网站 https d android com reference android content Context 但我无法清楚地理解它 简单来说 顾名思义 它是
  • Hibernate/JPA DB 架构生成最佳实践

    我只是想听听 Hibernate 专家关于基于 Hibernate JPA 的项目的数据库模式生成最佳实践的意见 尤其 项目刚开始时采用什么策略 是否建议让 Hibernate 在这个阶段自动生成架构 还是从项目的最早阶段手动创建数据库表更
  • 如何限制flatMap的并发数?

    我正在尝试使用 RxJS 编写一个脚本来处理数百个日志文件 每个日志文件大约 1GB 脚本的骨架看起来像 Rx Observable from arrayOfLogFilePath flatMap function logFilePath
  • matlab imagesc 背景颜色

    我正在使用最新版本的 matlab 我正在使用 imagesc 命令和 jet 颜色图绘制矩阵 矩阵的背景值为零 并在图像中绘制为颜色条上最低的颜色 即深蓝色 有没有办法使背景零值绘制为白色 Thanks j jet j 1 1 1 1 c
  • 从 AppDelegate 调用重新加载部分

    我正在构建一个应用程序来跟踪 BLE 设备 并且我有一个委托 在 appDelegate 中 来更新通过蓝牙发现的设备列表 我需要在表视图中显示这些设备 因此当我发现一个设备时 我会调用视图控制器中的一个函数来刷新表视图 如果我从 View
  • 根据文件扩展名打开语句

    我需要处理目录中的两种类型的文件 txt and gz 为此目的有两种类型的公开声明 gz files with gzip open file name rt encoding utf 8 as f line next f while li
  • e2e 测试 Angular UI 网格的规范方法

    故事 最近 我们的 UI 从自定义表格切换为角度 UI 网格 http ui grid info 随着它变得稳定且功能丰富 主 Angular UI 网格页面声称具有 e2e 测试集成 但我们很难让这项工作成功 据我们了解 e2e测试集成
  • 在Python中换行长行[重复]

    这个问题在这里已经有答案了 如何在 Python 中换行而不牺牲缩进 例如 def fun print 0 Here is a really long sentence with 1 format 3 5 假设这超出了建议的 79 个字符限
  • 以编程方式检测硬件呼叫/挂断键的存在

    我的一位客户想要一种返回布尔值的代码方法 如果 Android 手机有硬件红 绿呼叫 挂机键 则为 true 如果没有 则为 false 像这样的东西 public void keyFeedbackFromInput KeyEvent ev
  • 在 Android 中使用 Volley 解析 JSON 数据

    我尝试解析来自 的 JSON 数据https api instagram com v1 media popular client id https api instagram com v1 media popular client id 客
  • 如何挂钩异步 Backbone 事件来显示 HTML

    我想做的是调用数据库 然后以 HTML 形式显示结果 我一切正常 数据从数据库返回得很好 除了我无法弄清楚如何显示数据 我知道fetch 是异步的 但我不确定如何将其连接到我的集合视图中 这是我的骨干 function window App