ember.js 中是否有一个回调,我可以在状态转换后渲染所有视图后使用它来运行代码?

2024-01-07

我有由三个出口组成的应用程序视图:

<script type="text/x-handlebars" data-template-name="application">
        {{outlet header}}
        {{outlet content}}
        {{outlet footer}}
</script>

提出自己的观点(简化):

<script type="text/x-handlebars" data-template-name="header">
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" 
        {{action changeDate view.prevDate href=true}}>Prev</a>
{{view.model.weekDay}}
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" 
        {{action changeDate view.nextDate href=true}}>Next</a>
</script>

<script type="text/x-handlebars" data-template-name="content">
{{view.model.month}}
</script>

<script type="text/x-handlebars" data-template-name="footer">
{{view.model.day}}
</script>

和应用程序路由器使用路由逻辑刷新视图

Router: ember.Router.extend({
    root: ember.Route.extend({
        changeDate: ember.State.transitionTo('date'),
        index: ember.Route.extend({
            route: '/',
            connectOutlets: function (router) {
                router.transitionTo('date', new Date());
            }
        }),
        date: ember.Route.extend({
            route: '/:date',
            serialize: function (router, date) {
                return { date: toUrlString(date) };
            },
            deserialize: function (router, param) {
                return parseUrlString(param.date);
            },
            connectOutlets: function (router, date) {
                var appController = router.get('applicationController'),
                    controller = router.get('dayController');
                controller.navigateTo(date || new Date());
                appController.connectOutlet({ outletName: 'header', viewClass: router.namespace.HeaderView, controller: controller });
                appController.connectOutlet({ outletName: 'content', viewClass: router.namespace.ContentView, controller: controller });
                appController.connectOutlet({ outletName: 'footer', viewClass: router.namespace.FooterView, controller: controller });
            }
        })
    })
})

除了一件事之外,这一切都工作正常 - 应用程序使用 jQuery Mobile,并且在重新渲染视图后,我需要对更新的元素应用 jqm 增强功能。 我尝试使用didInsertElement在每个视图中回调以增强已重绘的部分。但它并没有按预期工作,因为 jqm 对页眉和页脚块有非常特殊的处理。除非使用以下方法重新初始化所有页面,否则它们不会得到适当的增强:.trigger('pagecreate')或通过使用.page('destroy').page()在根应用程序视图上。

问题是 - 每个视图都有自己的视图didInsertElement,因此增强代码执行了三次。

在路由转换完成并且所有受影响的视图都使用当前数据渲染和更新后,是否有可靠的方法来执行增强代码?


我最近添加了一些有助于解决此问题的东西,即渲染后队列。看这次提交 https://github.com/emberjs/ember.js/commit/512327c0128f53d4a0d6828ab38f27c6ccf686ec,特别是使用示例的测试。

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

ember.js 中是否有一个回调,我可以在状态转换后渲染所有视图后使用它来运行代码? 的相关文章

随机推荐

  • 让semantic_errors呈现准确的错误消息

    我有一个模型Camping which has many Images 露营至少需要一张图片 class Camping lt ActiveRecord Base attr accessible images attributes has
  • PostgreSQL:如何实现最小基数?

    正如这个问题中的回答 PostgreSQL 中的基数 https stackoverflow com questions 3135206 cardinality in postgresql 基数是使用强制执行的限制条件 http www p
  • 使用游标获取字段值

    我正在创建一个应用程序 但遇到问题Cursor 我有一个SQLiteDatabase这给我返回了一个Cursor当我尝试使用此函数获取值时 public Cursor fetchOption long rowId throws SQLExc
  • 如何将“zd”说明符与“printf()”一起使用?

    寻求有关使用的说明 zd with printf 当然 对于 C99 及更高版本 以下内容是正确的 void print size size t sz printf zu n sz C 规范seems允许printf zd n sz 取决于
  • 如何正确对齐此文本?

    我今天写了这个极地时钟 我几乎完成了 除了我想在行内对齐我的文本 类似于this http blog pixelbreaker com polarclock 有谁知道如何做到这一点 我尝试使用 FontRenderContext 和字体指标
  • Android HttpClient 性能

    我正在开发 Android 应用程序 它使用大量对 Web 服务的 http 请求 起初 我在每个请求之前创建一个新的 HttpClient 实例 为了提高性能 我尝试在多个线程中执行请求 因此 我使用 ThreadSafeConnecti
  • 带有 c:foreach jstl 标签的二维数组列表

    我在两个叠瓦式 JSTL 中使用二维数组列表
  • 计算多个 CSV 文件中一列的平均值

    我的文件夹中有 300 多个 CSV 文件 名为 001 csv 002 csv 等 每个包含一个带有标题的数据帧 我正在编写一个函数 该函数将采用三个参数 文件的位置 要计算平均值的列的名称 数据框内 以及计算中使用的文件 这是我的功能
  • 如何在 Eclipse 中调试在 jetty 上运行的 Web 应用程序?

    以前从未做过网络编程 有没有办法设置断点 在 Eclipse 中查看变量值 我想要调试的应用程序会生成一个我想轻松提取的查询字符串 单击外部工具配置 Select program and click the new button top l
  • 无法将 React.lazy 与 Material UI 图标一起使用

    因为我的应用程序中的很多地方都有很多图标 所以我想对它们使用代码分割 我创建了辅助组件来执行此操作 import React FunctionComponent Suspense from react interface LazyMuiIc
  • 在哪里可以找到 Google Compute Engine 的名称服务器?

    我已将一个网站上传到我的 Compute Engine 实例 并且我想设置注册器以将访问者发送到服务器 Compute Engine 在哪里可以通过 Compute Engine 获取实例 服务器的名称服务器 Google Compute
  • 使用 alex/happy 与 Cabal

    我正在为我正在学习的课程编写一个编译器 该类不是专门的 Haskell 但我使用 Haskell 来编写我的编译器和解释器 我有一个 cabal 包设置 希望能让我的教授轻松运行 编译 我有快乐和亚历克斯在build tools两个可执行文
  • node.js - 配置节点将函数加载到全局范围内?

    在现实生活中 我在某个地方看到我们可以配置 Node js 在全局范围内执行加载的模块 但我现在找不到如何做到这一点 我为什么要问 我有一些遗留文件定义了我想在服务器和客户端上使用的语言实用程序 但是其中许多实用程序被定义为全局范围函数 例
  • 设计确认在首次发送时无效

    我有一个 Rails 4 应用程序 使用 Devise 3 2 2 confirmable 并且遇到了发送无效确认令牌的问题 但是只是第一次 重新发送确认令牌后 链接将起作用 相关路线 devise for users skip sessi
  • 设置信用卡号格式

    如何在输入时格式化和验证信用卡号 每 4 位数字之间留有空格 eg 4464 6846 4354 3564 我努力了 creditno keyup function cc this val split join cc cc match ne
  • 使用 SwiftUI 的relativeWidth 仅适用于框架视图

    尝试在 SwiftUI 中构建一个条形图元素 其宽度根据元素的值与其父视图成比例 这是问题的简化版本 struct BarView View var body some View Color purple relativeWidth 0 5
  • 在 DB2 中显示表的定义

    大家好 我正在学习DB2 想知道如何 创建表后查看表的特征 类似于MySQL中的EXPLAIN TABLE命令 谢谢 此外DESCRIBE TABLE 您可以使用下面的命令 DESCRIBE INDEXES FOR TABLE tablen
  • 发送多个 HTTP 请求

    我需要编写使用项目 ID 查找有关项目的信息的程序 该 API 一次仅获取一项 因此我只能对每项执行一次查询 API 仅限于五个同时请求 任何额外的结果都会给出 HTTP 429 错误 如果有一个 JavaScript 对象 其中包含所有带
  • WordPress:重置密码始终无效密钥

    我有一个很大的问题 找不到解决方案 我已经安装了 Ultimate Member Plugin 并激活了它 当我现在重置用户的密码时 我会从我的页面收到一封电子邮件 其中包含在class password phpUM函数调用触发的插件文件u
  • ember.js 中是否有一个回调,我可以在状态转换后渲染所有视图后使用它来运行代码?

    我有由三个出口组成的应用程序视图 提出自己的观点 简化