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

Question

在使用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'加载"设置"视图时触发事件.此时,尚未显示子视图,并且具有自动聚焦绑定的元素无法获得焦点.当在设置页面之间导航时更清楚地说明这一点:在离开页面时,在旧子视图上具有自动聚焦绑定的字段获得焦点,然后显示新的子视图而没有聚焦元素.

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

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

提前致谢.

Answer 1

试试这个:

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;
        });
    }
};