杜兰达尔默认路线有效,其他什么都没有

Durandal default route works, nothing else

本文关键字:什么 其他 默认路 有效 杜兰达      更新时间:2023-09-26

我一直在绞尽脑汁,在互联网上找不到这个问题的答案。使用Hot towelette设置网站,将其升级到durandal 2.0和所有相关软件包。遵循Durandal网站上从1.0升级到2.0的指南,除了路线外,其他一切都正常工作。默认路由正常工作,网站会按预期加载默认页面。然而,点击页面顶部的导航,url会发生变化,但什么也没发生。url更改为http://host/#view.我看到散列后缺少斜杠,并将散列添加到路由中以修复该问题,但仍然没有更改视图。我试过很多不同的样品等,但没有发现问题所在。

main.js

    require.config({
    paths: {
        "text": "../Scripts/text",
        "durandal": "../Scripts/durandal",
        "plugins": "../Scripts/durandal/plugins",
        "transitions": "../Scripts/durandal/transitions",
    }
});
define('jquery', [], function() { return jQuery; });
define('knockout', [], function () { return ko; });
define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/router', 'services/logger'],
    function (system, app, viewLocator, router, logger) {
        app.title = "Remedy Approvals";
        app.configurePlugins({
            router: true
        })
        // Enable debug message to show in the console 
        system.debug(true);
        app.start().then(function () {
            toastr.options.positionClass = 'toast-bottom-right';
            toastr.options.backgroundpositionClass = 'toast-bottom-right';
            router.handleInvalidRoute = function (route, params) {
                logger.logError('No Route Found', route, 'main', true);
            };
        // When finding a viewmodel module, replace the viewmodel string 
        // with view to find it partner view.
        //router.makeRelative({ moduleId: 'viewmodels' });
        viewLocator.useConvention();
        // Adapt to touch devices
        //app.adaptToDevice();
        //Show the app by setting the root view model for our application.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

shell.js:

define(['durandal/system', 'plugins/router', 'services/logger'],
function (system, router, logger) {
    var shell = {
        router: router,
        activate: activate 
    };
    return shell;
    function activate() {
        var routes = [
                        { route: ['approvals',''], moduleId: 'approvals', title: 'My Approvals', nav: true, hash: '#/approvals' },
                        { route: 'alternate', moduleId: 'alternate', title: 'Alternate Approvals', nav: true, hash: '#/alternate' }
                ];
        return router.makeRelative({ moduleId: 'viewmodels' })
                .map(routes)
                .buildNavigationModel()
                .mapUnknownRoutes('approvals', 'not-found')
                .activate();
    }
//        function log(msg, data, showToast) {
//            logger.log(msg, data, system.getModuleId(shell), showToast);
//      }
    }
)

shell.html

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

nav.html

<div>
    <ul class="nav nav-pills" data-bind="foreach: router.navigationModel">
        <li role="presentation" data-bind="css: {active: isActive}"><a data-bind="attr: {href: hash}, html: title"></a></li>
    </ul>
    <label class="pull-right">username</label>
</div>

您在路由器的activeItem属性上使用compose绑定。我不知道这是否是"错误的",但我正在使用我的"路由器"绑定:

<div class="container page-host" data-bind="router"></div>

摘录自http://durandaljs.com/get-started.html:

视图底部是一个特殊的路由器绑定,用于连接到模块中的路由器。这是一个占位符,其中将显示当前"页面"。transition属性表示无论何时页面更改,Durandal都应该使用"入口"过渡动画。

相关文章: