如何挂钩异步 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 的相关文章

  • 使用backbone.marionette和requireJs的Web应用程序的循环依赖关系

    我处于以下情况 我正在使用 requireJs 加载模块 并且不想使用全局变量 main js 负责加载路由器 然后路由器加载应用程序 应用程序加载几个子应用程序 一切都初始化后 子应用程序需要router制作router navigate
  • 使用backbone.js处理belongs_to关系

    我对backbone js有点陌生 我正在努力获取具有belong to关系的集合 我想获取用户列表 users GET 并且我想显示所有用户 但带有belongs to关联 例如显示用户的公司名称 有人知道解决办法吗 我正在将 Ruby
  • 主干属性可以包含集合吗?

    在主干中 存储作者和书籍之间的关系 在本地存储中 所需的方式是什么 是否可以将集合作为属性 或者应该使用数组还是 var book Backbone Model extend defaults title var books Backbon
  • 扩展 React.js 组件

    我最欣赏 Backbone js 的事情之一是继承的工作方式简单而优雅 我开始掌握 React 但在 React 中找不到任何类似于此 Backbone 代码的内容 var Vehicle Backbone View extend meth
  • Backbone 对象渲染没有方法 apply - 绑定问题

    所以我在我的 AppView 中这样做 var flowerModel new app DataModel title flower values tulip rose dandelion dataToShow tulip rose dan
  • 主干+rails TypeError:List.Header不是构造函数

    我正在尝试按照从该网站购买的教程进行操作 http www backbonerails com http www backbonerails com 我正在关注该系列的第五集 起床运行 第 1 部分 在视频的 46 52 左右 他有 lis
  • JavaScript 错误:“不是构造函数”

    我使用backbone js以及jquery和underscore js 这是我的一些代码 它还没有做任何事情 奇怪的是 点击 url users 后没有错误 发生错误的唯一一次是当我单击转到不同的哈希 然后单击返回转到 users 时 这
  • 在 Backbone.js 中,为什么静默更改最终会触发更改事件?

    当我经过时 silent true 在 Backbone 模型中设置属性时 为什么不直接抑制change attribute事件 下次更改属性时触发该事件有什么好处 Update Backbone 0 9 10 改变了传递行为 silent
  • Backbone - 从 API 获取 JSON 数据

    这几天我在玩Backbone 我想从 Twitter 搜索 API 接收一些数据 但我真的不明白它是如何工作的 这是我的代码 function Tweet Backbone Model extend Tweets Backbone Coll
  • Backbone.js 中的分页

    我知道有一个组件可以实现此目的 但根据我所看到的 您必须创建一个扩展组件的新集合 还有另一种方法可以在主干中进行分页吗 我所需要的只是一个上一个和下一个按钮 将每页的项目限制为 12 个 我一直在 javascript 上创建它 对于生产环
  • 如果用户尚未登录,我如何拒绝他们访问我的 Backbone 应用程序的部分内容?

    所以我有一个 Backbone 应用程序 网页主页 现在 如果您登录我的网站 我会使用数据库中的用户详细信息创建一个全局对象 但是 您仍然可以直接点击应用程序中的其中一条路线 我应该如何处理未 登录 的用户并将他们重定向到 您必须登录页面
  • 从 Backbone 检索 Rails/devise current_user

    我有一个应用程序 可以通过 Devise 管理 Rails 的注册 输入 退出 当我登录时 我被重定向到 Backbone 启动的 Dashboard index 我想以某种方式在 Backbone 中检索我的 current user i
  • 在骨干模型上声明变量而不设置默认值

    我刚刚开始使用backbone js 我正在寻找一种在模型上声明字段而无需提供默认值的方法 它实际上仅供参考 以便当我开始创建实例时 我可以看到需要初始化哪些字段 用java之类的东西我会写 public class CartLine St
  • 保护我的 Node.js 应用程序的 REST API 安全?

    我可以在 REST API 上获得一些帮助 我正在编写一个 Node js 应用程序 它使用 Express MongoDB 并在客户端使用 Backbone js 在过去的两天里 我一直在努力解决所有这些问题 但运气不佳 我已经查过了 保
  • Backbone js 并使用 fetch() 用数据填充模型

    我正在 Backbone js 中工作 并尝试使用 fetch 用数据填充模型 问题是提取似乎有效 但我的模型没有填充数据 代码片段 Backbone emulateHTTP true Backbone emulateJSON true C
  • 与 jQuery 配合使用的backbone.js 替代品?

    有没有像backbone js这样的东西的替代品 它为你的前端javascript提供了一些框架 结构 但没有任何不需要的依赖项 并且与jQuery更紧密地结合在一起 您需要一个易于使用的 MVC 框架吗 因为Sammy js http s
  • 覆盖主干“设置”方法

    我想重写骨干集方法 以便每当我为骨干模型设置一个值时 都会调用在该属性上注册的回调 而无需检查该属性的相同先前值 var model Backbone Model extend defaults prop1 true var view Ba
  • 如何定义与 Backbone 一起使用的 jade 模板

    我需要使用模板来渲染每个 ItemView var ItemView Backbone View extend className item template template itemTemplate html initialize fu
  • 主干集合排序

    我制作了我的第一个主干应用程序 但在集合排序方面遇到了一些问题 使用这个后 var SortedFriends MyFriends sortBy function friend return friend get uid console l
  • 如何有一个后备路由来捕获backbone.js中的未知页面

    我设置了一组如下所示的路线 routes home home home page home 我想知道的是 如何配置路由 以便如果用户请求未知页面 我可以轻松重定向到静态 404 html 页面 在您的路由器中 例如前两条路由 routes

随机推荐

  • 每条路由的 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