2

我正在尝试设置 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);
        };
    });
});

外壳.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>

外壳.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;

    }
);
4

1 回答 1

5

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

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

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

需要改成这样：

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

没有它，我的导航将无法正常工作。这在 docs 中已经说得很清楚了，但我还是以某种方式错过了它：

您必须将模型和afterCompose回调都连接到路由器，以使一切正常工作。

于 2013-05-06T19:07:04.743 回答