Question

我一直在捣乱我的大脑和互联网，并没有找到这个问题的答案。使用Hot towelette设置网站，将其升级到durandal 2.0和所有相关软件包。遵循Durandal网站上从1.0升级到2.0的指南，除路线外一切正常。默认路由有效，站点按预期加载默认页面。但是，点击页面顶部的导航，网址会发生变化，但没有任何反应。该网址更改为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>

Answer 1

您正在使用路由器的activeItem属性上的compose绑定。我不知道这是不是＆＃34;错误＆＃34;因此，我使用＆＃34;路由器＆＃34;我的约束力：

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

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

在视图的底部是一个连接的特殊路由器绑定到模块中的路由器。这可以作为占位符当前＆＃34;页面＆＃34;将显示。过渡属性表示每当页面改变时，Durandal应该使用＆＃34;入口＆＃34; 过渡动画。

Durandal默认路线有效，没有别的

1 个答案: