Durandal路由不工作-我错过了一个配置设置

Durandal Routing not working--am I missing a configuration setting?

本文关键字:一个 设置 配置 错过了 路由 工作 Durandal      更新时间:2023-09-26

我试图得到一个Durandal应用程序设置,我开始与一个非常简单的配置只有两个视图。

发生的是,当我调用router.navigateTo('#/welcome')或router.navigateTo('#/primaryapplications ')时,视图没有改变。但是,地址栏中的URL发生了变化,如果我重新加载页面,我将获得我试图导航到的视图。

我做错了什么?

这里有一个视频展示了我所经历的行为。我在视频中引用的代码包含在下面。

main.js

require.config({
    paths: { "text": "durandal/amd/text" }
});
define(function (require) {
    var system = require('durandal/system'),
        app = require('durandal/app'),
        router = require('durandal/plugins/router'),
        viewLocator = require('durandal/viewLocator'),
        logger = require('services/logger');
    system.debug(true);
    app.start().then(function () {
        // route will use conventions for modules
        // assuming viewmodels/views folder structure
        router.useConvention();
        // When finding a module, replace the viewmodel string 
        // with view to find it partner view.
        // [viewmodel]s/sessions --> [view]s/sessions.html
        // Otherwise you can pass paths for modules, views, partials
        // Defaults to viewmodels/views/views. 
        viewLocator.useConvention();
        // Will assume that a URL to #/something corresponds to a viewmodels/something viewmodel.
        // http://durandaljs.com/documentation/Router/)
        //router.mapAuto();
        var routes = [{
            url: 'welcome',
            moduleId: 'viewmodels/welcome',
            name: 'Welcome',
            visible: true
        }, {
            url: 'primaryapplicants',
            moduleId: 'viewmodels/primaryapplicants',
            name: 'Primary Applicants',
            visible: true
        }];
        router.map(routes);
        app.setRoot('viewmodels/shell');
        // override bad route behavior to write to 
        // console log and show error toast.
        // This method also accepts a "params" parameters, but we're not using it,
        // and to avoid JSLint warnings, we're not including it.
        router.handleInvalidRoute = function (route) {
            logger.logError('No route found', route, 'main', true);
        };
    });
});

shell.html

<div>
Shell HTML
<ul id="navbar">
    <li><a href="#/welcome">Welcome</a></li>
    <li><a href="#/primaryapplicants">Primary Applicants</a></li>
</ul>
        <!--ko compose: {model: router.activeItem} -->
        <!--/ko-->
</div>

shell.js

define(['durandal/system', 'services/logger', 'durandal/plugins/router'],
    function (system, logger, router) {

        function activate() {
            // Listen for click events so we can navigate
            $('body').on('click', '#navbar a', function (event) {
                var navTo = '#/welcome';
                navTo = event.target.hash;
                logger.log('Attempting navigation to ' + navTo,
                        null,
                        system.getModuleId(shell),//ignore jslint
                        true);
                router.navigateTo(navTo);
                //alert("About to navigate to " + event.target.hash);
                //router.navigateTo(event.target.hash);
            });

            logger.log('Shell loaded',
                null,
                system.getModuleId(shell),//ignore jslint
                true);
            return router.activate('welcome');
        }
        var shell = {
            activate: activate,
            router: router
        };
        return shell;
    }
);

通常情况下,一旦你找到了解决方案,它真的很简单。

显然,在compose绑定(Durandal提供的自定义Knockout绑定)中,必须有一个afterCompose绑定。换句话说,就是:
    <!--ko compose: {model: router.activeItem} -->
    <!--/ko-->

需要修改为:

    <!--ko compose: {model: router.activeItem, afterCompose: router.afterCompose} -->
    <!--/ko-->

没有它,我的导航就无法工作。这在文档中已经说得很清楚了,但我还是没有注意到:

必须将模型afterCompose回调连接到