durandal - Hottowel 转换为 Durandal 2 期

Question

我正在开发 Hottowel 项目，并更新到 Durandal 2.0。我已经关注了Converting from 1.x to 2.0 guide ，但我仍然有一些问题:

1.加载router插件总是超时，除非我像这样加载它:

app.configurePlugins({
        dialog: true,
        router: true
    }, '../durandal/plugins');

注意路径参数。

2. 我无法再从一个模块转换到另一个模块。加载模块的唯一方法是使用 URL 中的特定哈希刷新页面。当我单击导航按钮时，浏览器 URL 中的哈希值会发生变化，但模块不会加载。此外，router.isNavigating 停留在 true。

以下是文件:

main.js

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

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

define(['durandal/app', 'durandal/viewLocator', 'durandal/system', 'services/logger'],
    function (app, viewLocator, system, logger) 
        system.debug(true);

        app.title = 'MyApp';

        app.configurePlugins({
            dialog: true,
            router: true
        }, '../durandal/plugins');

        app.start().then(function () {
            viewLocator.useConvention();

            app.setRoot('viewmodels/shell', 'entrance');
        });
});

shell.js

define(['durandal/plugins/router', 'durandal/app', 'services/logger', 'services/authentication', 'config'],
function (router, app, logger, authentication, config) {
    return {
        router: router,
        activate: function () {
            router.map(config.routes)
                .buildNavigationModel()
                .mapUnknownRoutes('home');

            logger.log('Application loaded', {}, 'shell', true);

            return router.activate();
        },
        authentication: authentication
    };
});

config.routes

[
    { route: ['', 'home'],  moduleId: 'viewmodels/home',       title: 'Home',      nav: true, caption: '<i class="icon-home"></i> Home' },
    { route: 'mainMenu',    moduleId: 'viewmodels/mainMenu',   title: 'Main Menu', nav: true, caption: '<i class="icon-th-list"></i> Main Menu' },
    { route: 'logIn',       moduleId: 'viewmodels/logIn',      title: 'Log In',    nav: false },
    { route: 'profile',     moduleId: 'viewmodels/profile',    title: 'Profile',   nav: false },
    { route: 'admin',       moduleId: 'viewmodels/admin',      title: 'Admin',     nav: false }
]

View 模型示例:viewmodels/logIn.js

define(['services/logger', 'durandal/plugins/router', 'services/authentication'],
    function (logger, router, authentication) {
        var userName = ko.observable(),
            password = ko.observable(),
            rememberMe = ko.observable();

        function activate() {
            logger.log('Log in view activated', null, 'logIn', true);
            return true;
        }

        function logIn() {
            authentication.logIn(userName(), password(), rememberMe());
        }

        var vm = {
            activate: activate,
            userName: userName,
            password: password,
            rememberMe: rememberMe,
            logIn: logIn
        };

        return vm;
});

编辑

shell.html

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

Answer 1

问题出在 View 组合上。新版本中也更新了这一点。应该是:

<div id="content" data-bind="router: { transition: 'entrance' }"></div>

而不是

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

感谢@margabit 将我指向 shell.html。