使用 childRouter 时的 Durandal 路由器/生命周期事件

2023-12-21

在使用 Durandal 构建的单页应用程序中,我有一个设置视图,其中包含不同的部分。我使用 childRouter 来解析不同的部分。

在此应用程序中,许多代码挂钩到 Durandal 使用的组合生命周期事件。例如,这个自定义绑定:

ko.bindingHandlers.autoFocus = {
    init: function (element) {
        var $element = $(element),
            setFocus = function () {
                $element.focus();
            };

        router.on('router:navigation:composition-complete', setFocus);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            router.off('router:navigation:composition-complete', setFocus);
            $element = null;
        });
    }
};

到目前为止,此自定义绑定功能完美,将焦点设置到显示视图时应用绑定的字段。

然而,对于子路由器来说,计时是关闭的。看来主路由器触发了'router:navigation:composition-complete'加载“设置”视图时发生的事件。此时,子视图尚未显示,并且具有自动焦点绑定的元素未获得焦点。在设置页面之间导航时,这一点会更清楚地说明:离开页面时,旧子视图上具有自动对焦绑定的字段获得焦点,然后显示新的子视图,而没有焦点元素。

有没有办法让子路由器也忽略事件?或者可能让主路由器推迟事件直到子路由器完成?

我还读到这也适用于作曲的其他阶段:例如不会在子视图的视图模型上调用 deactivate 回调。因此,对子路由器上的事件触发进行一般修复将是我正在寻找的理想解决方案。

提前致谢。


尝试这个:

ko.bindingHandlers.autoFocus = {
    init: function (element) {
        var $element = $(element),
            setFocus = function (child, parent, context) {
                $element.focus();
                        if (child.router)
                            child.router.on('router:navigation:composition-complete', function () {    $element.focus(); });
};
        router.on('router:navigation:composition-complete', setFocus);
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            router.off('router:navigation:composition-complete', setFocus);
            $element = null;
        });
    }
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 childRouter 时的 Durandal 路由器/生命周期事件 的相关文章

  • KnockoutJS:如何将一个 observableArray 添加到另一个 observableArray?

    我想将选择元素中的选定选项添加到绑定表中 视图模型具有 addItem 函数 该函数使用 ko utils arrayPushAll 将 selectedItems 数组添加到 linkedItems 数组中 但是当我单击 添加 按钮 调用
  • 如何将 Knockout js 模型绑定到向导风格的 UI

    我正在使用 Knockout js 我有一个包含对象数组的视图模型 我希望允许用户使用向导样式界面编辑其中一个对象 我遇到的问题是向导将根据所做的选择显示不同的步骤 例如 如果用户在步骤 1 中选择 是 则我将显示步骤 2a 如果用户在步骤
  • 指定网格中的默认排序

    使用knockout kendo绑定绑定Telerik Kendo网格时是否可以指定默认排序 我像这样绑定网格 kendoGrid data grid Rows sortable allowUnsort false mode single
  • 制作一个没有 new 关键字的 javascript 淘汰视图模型

    我正在浏览淘汰教程 所有示例都使用 new 关键字创建视图模型 from learn knockoutjs com function AppViewModel this firstName ko observable Bert this l
  • 具有多个视图的 Durandal 小部件

    我正在使用 Durandal 开发 SPA 并且我创建了一个用于显示特定页面组件的小部件 继杜兰达尔文档 http durandaljs com documentation Creating A Widget 小部件位于app widget
  • Knockoutjs 自定义绑定在项目完全渲染之前执行

    我正在尝试对项目列表执行回调以使用数据表 http datatables net 现在我想在渲染所有项目之后执行回调 而不是在渲染每个项目之后执行回调 跟随那个所以问题 https stackoverflow com questions 1
  • Knockout js 大量自定义绑定

    在绑定不存在的情况下 处理大量自定义绑定的好方法是什么 假设我的 html 表达式绑定到 image url 如下所示 span title Company Logo span 然而 image url 绑定很可能不可用 在这种情况下 我只
  • knockoutjs 中的滑动动作绑定

    我在我的应用程序中使用淘汰赛作为主要框架 它必须支持平板电脑和移动设备 由于框架是基于绑定处理程序构建的 我想知道如何实现对操作 如滑动和其他特定于设备的操作 的自定义绑定 或者也许有类似的事情完成 可能为时已晚 但这里有一个库 将触摸绑定
  • 淘汰赛js和全球化

    我不知道如何使用淘汰赛 js 和非美国语言环境来处理计算 我的逗号是 并且使用 jquery globalization 插件正确验证 但淘汰计算给我一个 NaN knockout js 是否以任何方式支持这一点 或者是否存在任何解决方法
  • 将淘汰对象转换为纯 JavaScript 对象时出现无限循环

    遵循中给出的说明文档 http knockoutjs com documentation json data html 我有以下视图模型 var newContactViewModel function var self this self
  • KnockoutJS:在 Select 中的每个选项上调用单击事件

    我希望每当用户单击 SELECT 元素中的选项时 Knockout 都会调用一个事件 这是我的 JavaScript function ReservationsViewModel this availableMeals mealName S
  • 使用Knockout将不同模型绑定到页面上的不同部分

    我在我的 asp net 应用程序中使用淘汰赛 javascript 库 对于淘汰赛我使用ko对象和应用绑定 方法来绑定它 现在我想将两个淘汰对象绑定到两个不同的用户界面部分 我如何使用第二个淘汰对象或第二个数据源 以便我可以在第二部分中使
  • 如何从 Knockoutjs toJS() 中排除某些属性

    我有以下模型 var model A One B Two C Three 我将各种 UI 元素绑定到这些字段 效果很好 不过 我将模型转换回 JavaScript 对象 以便可以将任何更改保存到服务器 var goingToServer k
  • 使用 knockout.js 防止双击按钮

    禁用按钮以便 Knockout js 不会发生双击的最佳方法是什么 我有一些用户快速点击导致多个 ajax 请求 我认为 knockout js 可以通过多种方式处理这个问题 并希望看到一些替代方案 使用信号量 旋转锁 基本上 您计算一个元
  • Knockout.js、映射插件和 moment.js - 格式化/映射 json 日期

    我将 Knockout js 与映射插件一起使用 我正在获取一些 json 数据并使用映射插件将其映射到我的 html 中 json 数据中是 json 格式的日期 我需要使用映射插件将其映射到 html 中 是否可以使用 moment j
  • 敲除验证

    我有一个 asp net mvc3 项目 我在其中使用淘汰赛绑定对表进行批量编辑 我想在保存数据时进行必需验证和数字验证等验证 有没有更简单的方法来进行淘汰验证 PS 我没有使用表格 看一下敲除验证 https github com eri
  • Typescript 中此子范围的问题

    This is ALMOST和其他人一样this到目前为止 我已经读过范围界定问题 除了一个细微的差别之外 这使得提出这个问题变得有意义 imo 现在最初我的问题是范围this使用 Knockout 和 Typescript 因此给出以下内
  • Knockout 将 css 类绑定到观察到的模型属性

    我想将 divs css 类绑定到视图模型的属性 如下所示 div 但这会产生结果 div class 0 1 2 3 这是视图模型 myViewModel selectedPriority ko observable High Compa
  • Edge 中的 Javascript 仅适用于打开的 devtools

    我遇到的问题是 在 MS Edge 中 我的图像映射功能只能部分工作 它由淘汰赛 FW 提供动力 在更大的图像映射上 它不会将整个图像映射注册到视图模型中 因此 图像映射的所有悬停效果和单击样式都会停止工作 然而 这只是大图像地图的问题 还
  • 重新评估仅依赖于可观察数组的淘汰赛计算

    我的 Appmodel 由一系列可观察的评论组成 self comments ko observableArray Default Value is an empty array Here comes some code to initia

随机推荐

  • R CMD 检查因“未定义的导出”而失败

    我正在尝试创建 R 包 但不断收到错误 Error in namespaceExport ns exports undefined exports MCLE defineFunctions naiveMLE 跑步时R CMD check在我
  • JPA2 Criteria API 运行时从 varchar(25) 转换为十进制

    因此 我已经看到类似主题上堆栈溢出的所有线程 但我没有找到解决我的问题的方法 我正在尝试创建一个 Criteria 查询 并得到以下 SQL 第一个 SQL 简化版 SELECT latitude FROM stations WHERE A
  • Javascript momentjs 将 UTC 从字符串转换为日期对象

    各位 在处理 moment js 文档时遇到困难 record lastModified moment utc format returns 2014 11 11T21 29 05 00 00 太棒了 它是 UTC 当我将其存储在 Mong
  • 在 Windows 上使用 C 将数据流式传输到声卡 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 作为大学项目的一部分 我必须进行一些信号处理 并希望使用 PC 声卡输出结果 该软件必须用 C 语言编写
  • 如何正确使用批处理 Tensorflow 数据集?

    我是 Tensorflow 和深度学习的新手 并且在 Dataset 类上遇到了困难 我尝试了很多方法 但找不到好的解决方案 我正在尝试什么 我有大量图像 500k 来训练我的 DNN 这是一个去噪自动编码器 所以我每个图像都有一对 我正在
  • ActionBar 菜单项中的 orderInCategory 是什么以及为什么它用于..?

    我正在处理操作菜单项及其溢出项 这是我的main menu xml menu menu
  • 如何让 Maven 构建更快?

    我有一个多模块java项目 Maven 大约需要 40 秒来构建它 我也尝试过使用多线程构建 Maven 方法是指定 T 和 C 参数来表示不使用任何线程和核心 但我还没有看到我的构建的墙时间有任何显着的改进 我正在使用 maven 3 2
  • 如何防止每次运行整个笔记本时运行“pip install ...”?

    我运行的大多数 python 笔记本在初始运行时往往需要一些设置 使用 pip install 每次运行笔记本时都执行设置代码效率很低 因此我宁愿避免这种情况 另外 我不想将设置代码移动到不同的笔记本 因为通常它只是几行代码 我的解决方案是
  • 在 Python 中将 ASCII 代码列表转换为字符串(字节数组)

    我有一个整数 ASCII 值列表 需要将其转换为字符串 二进制 以用作加密操作的密钥 我正在用python重新实现java加密代码 这是可行的 假设密钥是 8 字节 key struct pack BBBBBBBB 17 24 121 1
  • 如何在Linux上列出非空子目录?

    我有一个包含多个子目录的目录 我只想列出那些至少包含一个文件的子目录 我怎样才能做到这一点 find mindepth 1 maxdepth 1 not empty type d 将为您提供所有非空目录 如果您想排除仅包含其他目录 但不包含
  • 抽象类返回

    抱歉 如果这是一件小事 我创建了一个带有一些子类的抽象类 控制器类创建请求子类类型的抽象类类型的对象 并返回实现的抽象类 子类具有特定的属性 我无法访问返回对象的这些属性 因为这是抽象类默认类型 所以我尝试进行转换 但这会出现错误 item
  • 在 Heroku 上运行 Rails 单元测试

    我已经将一个应用程序部署到 Heroku 一切正常 问题是我无法远程运行单元测试 我试过了 heroku rake test units and heroku rake db test prepare 但对于两者 我都得到了大量的堆栈跟踪
  • 重命名远程分支

    我创建了一个本地分支 X 在某个时候我将其推送到远程服务器 来源 git push origin X 我意识到将分支命名为 X 并希望将其命名为 Y 是一个坏主意 问题是我已经将分支推送到存储库 从服务器中删除它并以这样的新名称推送它是否安
  • 在 Marshmallow 上不会调用 Spannable String 的绘制方法

    我的应用程序中有一个日历 日历是一个带有每个日期按钮的 GridView 我尝试用下面的课程给它们上色 public class CircleSpan extends ReplacementSpan private final float
  • 在 ActionBar 中获取 Switch 实例

    我设法在操作栏内放置了一个开关 如 Wi Fi 设置中一样 我把以下内容主菜单 xml menu 文件夹内的文件 menu menu
  • 保存和重用 SPARQL 查询的结果

    我正在使用 Jena 通过 Eclipse 查询 owl 文件 我想做一些连续的查询 每个新查询都将使用前一个查询的结果 我想在不同的 SELECT 中执行此操作 并每次保存查询结果 以便在新查询中再次使用它 我不想自己插入变量的值 而是从
  • JDialog 取消按钮

    如何在 Swing 中设置取消按钮JDialog 即如果用户按下键盘上的 取消 键 其操作会自动执行的按钮 通过以下方式向对方提供默认操作setDefaultButton对话框根窗格的方法 如果这有帮助 我正在寻找 WinForms 的类似
  • d3js在地图上强制布局

    我正在尝试在地图上放置一个力布局节点系统 某些节点在我使用的 json 文件中具有 lon 和 lat 值 其他节点只需连接 无需地理参考 我想将具有 lon 和 lat 值的节点放置在适当的位置 而其他节点只是为了连接 我发现了我遵循的这
  • Sqlalchemy 无法在事务块内运行

    我正在尝试从 python 脚本在 redshift 中运行查询 但出现错误 sqlalchemy exc InternalError psycopg2 InternalError ALTER EXTERNAL TABLE cannot r
  • 使用 childRouter 时的 Durandal 路由器/生命周期事件

    在使用 Durandal 构建的单页应用程序中 我有一个设置视图 其中包含不同的部分 我使用 childRouter 来解析不同的部分 在此应用程序中 许多代码挂钩到 Durandal 使用的组合生命周期事件 例如 这个自定义绑定 ko b