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

viewmodel示例：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

问题在于视图构成。这也在新版本中更新。它应该是：

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

而不是

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

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

Answer 2

我认为你的第二个问题是Durandal中的一个错误，现在已经修复了，但它可能还没有在Nuget包中。

试试这个：

转到Scripts / Durandal / composition.js中的第353行并更改此行

if (instruction.cacheViews != undefined && !instruction.cacheViews)

到此：

if (instruction != undefined && !instruction.cacheViews)

这可以解决您的问题吗？

Hottowel转换为Durandal 2期

2 个答案: