在使用 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(使用前将#替换为@)