durandaldurandal-2.0durandal-navigation

Durandal child router updating bindings only once


The router that I have created successfully builds a navigation model, but it's missing to update some bindings that need to be updated each time a page is loaded within that childRouter (app.pageTitle, app.pageDescription).

Is there some way how to map these updates into Durandal's lifecycle, something like activate event?

define([ 'durandal/app', 'plugins/router', 'knockout', 'app' ], function(app, router, ko, app) {

    console.log("content start");

    var childRouter = router.createChildRouter().makeRelative({
        moduleId : 'app/content/pages',
        fromParent : true
    }).map([ {
        route : [ '', 'grid' ],
        moduleId : 'grid/index'
    }, {
        route : 'details/:id',
        moduleId : 'details/index'
    }, {
        route : 'details/tabs/base',
        moduleId : 'details/tabs/base'
    } ]).buildNavigationModel();

    console.log("cms title start");
    app.pageTitle(app.i18n('app:modules.content.title'));
    app.pageDescription(app.i18n('app:modules.content.subtitle'));
    console.log("cms title stop");

    return {
        router : childRouter
    };
});

Solution

  • The simplest solution that works would be adding activate function and returning it. Durandal will then call it everytime a page from the childRouter navigation model is requested.

    define([ 'durandal/app', 'plugins/router', 'knockout', 'app' ], function(app, router, ko, app) {
    
        console.log("content start");
    
        var childRouter = router.createChildRouter().makeRelative({
            moduleId : 'app/content/pages',
            fromParent : true
        }).map([ {
            route : [ '', 'grid' ],
            moduleId : 'grid/index'
        }, {
            route : 'details/:id',
            moduleId : 'details/index'
        }, {
            route : 'details/tabs/base',
            moduleId : 'details/tabs/base'
        } ]).buildNavigationModel();
    
        function activate() {
            console.log("cms title start");
            app.pageTitle(app.i18n('app:modules.content.title'));
            app.pageDescription(app.i18n('app:modules.content.subtitle'));
            console.log("cms title stop");
        }        
    
        return {
            activate : activate,
            router : childRouter
        };
    });