3

我正在做一个 Hottowel 项目，我更新到了 Durandal 2.0。我遵循了从 1.x 到 2.0 的转换指南，但我仍然有一些问题：

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

视图模型示例：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>
4

2 回答 2

8

问题出在视图组合中。这也在新版本中进行了更新。它应该是：

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

代替

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

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

于 2013-08-23T14:31:48.137 回答
2

我认为您的第二个问题是 Durandal 中的一个错误，该错误现已修复，但它可能尚未包含在 Nuget 包中。

尝试这个：

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

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

对此：

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

这能解决你的问题吗？

于 2013-08-23T13:52:14.487 回答