Durandal Routing无法正常工作 - 我是否缺少配置设置？

Question

我正在尝试使用Durandal应用程序设置,我开始时只使用两个视图进行了非常简单的配置.

发生的事情是当我调用router.navigateTo('#/ welcome')或router.navigateTo('#/ primaryapplicants')时,视图不会改变.但是,地址栏中的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;

    }
);

Answer 1

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

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

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

需要改为:

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

没有它,我的导航将无法正常工作.这在文档中已经说得很清楚,但我仍然以某种方式错过了它:

您必须将模型和afterCompose回调连接到路由器,以便一切正常工作.