0

您好,感谢您查看我的问题。

我一直在迁移我的 SPA 应用程序以使用 Durandal 2.0 库,遵循我的救世主John Papa的明智建议。现在我已经完成了升级过程,当我尝试使用我的菜单按钮进行导航时,我发现了一个奇怪的行为(或缺乏行为)。具体来说,没有发生的是浏览器没有重定向到新页面。有趣的是,浏览器地址栏已正确填充,如果我只需单击地址栏并按回车键(硬重新加载),就会按预期重定向。

我环顾四周,这不是由于我在其他地方看到其他讨论的任何安全检查/重定向引起的。Durandal 代码未修改。

页面上的 js 可能非常简单:

define([], function () {
    console.log("welcome loaded");
    var vm = {  
        title: 'Welcome'
    };

    return vm;
});

所以我的猜测是它在我的 durandal 配置中。

主.js:

    require.config({
    paths: {
        'text': '../Scripts/text',
        'durandal': '../Scripts/durandal',
        'plugins': '../Scripts/durandal/plugins',
        'transitions': '../Scripts/durandal/transitions',
        'knockout': '../Scripts/knockout-2.3.0',
        'bootstrap': '../Scripts/bootstrap',
        'jquery': '../Scripts/jquery-1.9.1'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery'],
            exports: 'jQuery'
        }
    }
});

define('jquery', function () { return jQuery; });
define('knockout', ko);

define(['durandal/system', 'durandal/app', 'durandal/viewLocator'],
    function (system, app, viewLocator) {

    // Enable debug message to show in the console 
        system.debug(true);

    app.configurePlugins({
        router: true,
        dialog: true,
        widget: true
    });

    app.start().then(function () {
        toastr.options.positionClass = 'toast-bottom-right';
        toastr.options.backgroundpositionClass = 'toast-bottom-right';

        // When finding a viewmodel module, replace the viewmodel string 
        // with view to find it partner view.
        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');
    });
});

外壳.js:

define(['../../Scripts/durandal/plugins/router', 'viewmodels/config', 'services/datacontext'], function (router, config, datacontext) {

    function addSession(item) {
        router.navigate(item.hash);
    }

    function boot() {
        //    $(".page-splash-message").text("Configuring routes...");
        router.makeRelative({ moduleId: 'viewmodels' });
        router.map(config.routes);
        router.buildNavigationModel();
        $(".page-splash-message").text("Let's make traxx..!");

        return router.activate();
    }

    function failedInitialization(error) {
        var msg = 'App initialization failed: ' + error.message;
    }

    return {
        addSession: addSession,
        adminRoutes: adminRoutes,
        profileRoutes: profileRoutes,
        visitorRoutes: visitorRoutes,
        router: router,

        activate: function () {
            datacontext.primeEditData().then(boot).fail(failedInitialization);
        }
    };
});

config.js 中的路由

define(['../../Scripts/durandal/plugins/router'], function (router) {
        toastr.options.timeOut = 4000;
        toastr.options.positionClass = 'toast-bottom-right';
        var startModule = 'Welcome';
        var serviceName = 'api/Zepher';
        var imageSettings = {
            imageBasePath: '../content/images/photos/',
            unknownPersonImageSource: 'unknown_person.jpg'
        };

    var routes = [
        { route: '', moduleId: 'home/welcome', title: 'Welcome', nav: false, },
        { route: 'Welcome', moduleId: 'home/welcome', title: 'Welcome', nav: false, },
        { route: 'NotFound', moduleId: 'home/notFound', title: 'Not Found', nav: false, },
        { route: 'Roadmap', moduleId: 'home/roadmap', title: 'Roadmap', nav: false, },
        { route: 'Register', moduleId: 'account/register', title: 'Register', nav: true, caption: '<i class="fa fa-user"></i> Register' },
        { route: 'RegisterAccounts', moduleId: 'account/registerAccounts', title: 'Register Accounts', nav: false, caption: '<i class="fa fa-key"></i> Register Accounts', },

    ];
        return {
        debugEnabled: ko.observable(true),
        imageSettings: imageSettings,
        servicetitle: serviceName,
        startModule: startModule,
        router: router,
        routes: routes,
        activate: function () {
            console.log("config activate called");
            router.makeRelative({moduleId: 'viewmodels'});
             router.map(routes);
             router.buildNavigationModel(); 

            //sets up conventional mapping for 
            //unrecognized routes
             router.mapUnknownRoutes('home/nontFound', 'not-found'); 

            //activates the router
             return router.activate(); 
            // no longer needs a start module
        }
    };
});
4

1 回答 1

0

发现了我在升级中缺少的东西,所以我想我会分享我学到的东西。

似乎我忘了更新我的 Shell.html 文件。

由此:

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

对此:

<div>
    <header>
        <!--ko compose: {view: 'shared/nav', afterCompose: router.afterLogging, transition: 'entrance' } --><!--/ko-->
    </header>
     <section id="content" class="main container-fluid page-host" data-bind="router: { transition: 'entrance', cacheViews: true }">
    </section>
    <footer>
        <!--ko compose: {view: 'shared/footer'} --><!--/ko-->
    </footer>
</div>
于 2014-06-02T13:00:18.187 回答