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');

path パラメータに注意してください。

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 }
]

ビューモデルの例: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>