5

在使用 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'加载“设置”视图时触发了该事件。此时，子视图还没有显示出来，绑定了自动对焦的元素并没有获得焦点。在设置页面之间导航时更清楚地说明了这一点：离开页面时，旧子视图上具有自动对焦绑定的字段获得焦点，然后显示新的子视图而没有焦点元素。

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

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

提前致谢。

4

1 回答 1

5

尝试这个：

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;
        });
    }
};
于 2014-02-07T16:56:49.570 回答