javascript - Durandal 路由不起作用——我是否缺少配置设置？

Question

我正在尝试设置 Durandal 应用程序，我从只有两个 View 的非常简单的配置开始。

发生的事情是，当我调用 router.navigateTo('#/welcome') 或 router.navigateTo('#/primaryapplicants') 时， View 没有改变。但是，地址栏中的 URL 会发生变化，如果我重新加载页面，我会看到我尝试导航到的 View 。

我做错了什么？

这是一个 video demonstrating the behavior I'm experiencing .我在视频中引用的代码包含在下面。

主.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;

    }
);

Answer 1

通常情况下，一旦您找到解决方案，它就真的很简单。

显然，在 compose 绑定(bind)(Durandal 提供的自定义 Knockout 绑定(bind))中，您必须有一个 afterCompose 绑定(bind)。换句话说，这:

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

需要改成这样:

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

没有它，我的导航将无法工作。这是 stated clearly enough in the docs ，但我还是以某种方式错过了它:

You must wire both the model and the afterCompose callback to the router in order for everything to work properly.