javascript - Durandal 默认路由有效，没有其他

Question

我绞尽脑汁，上网查了很多遍，也没有找到这个问题的答案。使用 Hot towelette 设置站点，将其升级到 durandal 2.0 以及所有相关的软件包。按照 Durandal 网站上的从 1.0 升级到 2.0 的指南进行操作，除了路线之外，一切正常。默认路由有效，并且站点按预期加载默认页面。然而，单击页面顶部的导航，网址会发生变化，但没有任何反应。网址更改为 http://host/#view 。我看到散列后缺少斜杠，并将散列添加到 route 以修复该问题，但仍然没有更改 View 。我尝试了许多不同的示例等，但还没有找到问题所在。

main.js

    require.config({
    paths: {
        "text": "../Scripts/text",
        "durandal": "../Scripts/durandal",
        "plugins": "../Scripts/durandal/plugins",
        "transitions": "../Scripts/durandal/transitions",
    }
});

define('jquery', [], function() { return jQuery; });
define('knockout', [], function () { return ko; });

define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/router', 'services/logger'],
    function (system, app, viewLocator, router, logger) {
        app.title = "Remedy Approvals";

        app.configurePlugins({
            router: true
        })

        // Enable debug message to show in the console 
        system.debug(true);

        app.start().then(function () {
            toastr.options.positionClass = 'toast-bottom-right';
            toastr.options.backgroundpositionClass = 'toast-bottom-right';

            router.handleInvalidRoute = function (route, params) {
                logger.logError('No Route Found', route, 'main', true);
            };

        // When finding a viewmodel module, replace the viewmodel string 
        // with view to find it partner view.
        //router.makeRelative({ moduleId: 'viewmodels' });
        viewLocator.useConvention();

        // Adapt to touch devices
        //app.adaptToDevice();
        //Show the app by setting the root view model for our application.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

shell.js:

define(['durandal/system', 'plugins/router', 'services/logger'],
function (system, router, logger) {
    var shell = {
        router: router,
        activate: activate 
    };

    return shell;
    function activate() {
        var routes = [
                        { route: ['approvals',''], moduleId: 'approvals', title: 'My Approvals', nav: true, hash: '#/approvals' },
                        { route: 'alternate', moduleId: 'alternate', title: 'Alternate Approvals', nav: true, hash: '#/alternate' }
                ];

        return router.makeRelative({ moduleId: 'viewmodels' })
                .map(routes)
                .buildNavigationModel()
                .mapUnknownRoutes('approvals', 'not-found')
                .activate();
    }

//        function log(msg, data, showToast) {
//            logger.log(msg, data, system.getModuleId(shell), showToast);
//      }
    }
)

shell.html

<div>
    <header>
        <!--ko compose: {view: 'nav'} --><!--/ko-->
    </header>
    <section id="content" class="main container-fluid">
        <!--ko compose: {model: router.activeItem,
            afterCompose: router.afterCompose,
            transition: 'entrance'} -->
        <!--/ko-->
    </section>
    <footer>
        <!--ko compose: {view: 'footer'} --><!--/ko-->
    </footer>
</div>

导航.html

<div>
    <ul class="nav nav-pills" data-bind="foreach: router.navigationModel">
        <li role="presentation" data-bind="css: {active: isActive}"><a data-bind="attr: {href: hash}, html: title"></a></li>
    </ul>
    <label class="pull-right">username</label>
</div>

Answer 1

您正在路由器的 activeItem 属性上使用 compose 绑定(bind)。我不知道这是否是“错误”，但我正在使用“路由器”绑定(bind):

<div class="container page-host" data-bind="router"></div>

摘自http://durandaljs.com/get-started.html :

At the bottom of the view is a special router binding which connects to our router in the module. This serves as a placeholder where the current "page" will be displayed. The transition property indicates that whenever the page changes, Durandal should use the "entrance" transition animation.