Activate Function in composed view in Durandal

Question

I have Shell html like this

<div data-bind="compose: { model: 'ui/user/viewmodels/header', view: 'infoveave/user/views/header'}"></div>
<div class="container-fluid page-host">
    <!--ko compose: {
        model: router.activeItem,
        afterCompose: router.afterCompose,
        transition:'entrance'
    }--><!--/ko-->
</div>

and shell js like

define(function(require) {
var router = require('durandal/plugins/router'),
    system = require('durandal/system'),
return {
    router: router,
    activate: function () {
        var self = this;
        router.mapAuto('ui/user/viewmodels');
        system.log('Sheel Activate Called');
        return router.activate('dashboard');
    }
};
});

the problem is the activate function on the header doesn't get called but the one on the dashboard gets called, I have to fetch some ajax content in the header and bind it, How can i achieve this

I want to keep this logic separate as i don't want my shell to have this logic

for reference my header (for simplification i have converted my complex model to a simple observable

define(function (require) {
var router = require('durandal/plugins/router'),
    system = require('durandal/system');

this.userInfo = ko.observable('');

return {
    router: router,
    activate: function () {
         system.log('Got Called Now');
         //do some ajax stuff here and update userinfo
    }
};
});

the simplest form of header html is

<span class="dropdown-notif" data-bind="text: userInfo"></span>

Answer 1

I don't think you are activating the header view model.

Try adding 'activate:true' to the header view compose binding like this:

<div data-bind="compose: { 
    model: 'ui/user/viewmodels/header', 
    view: 'infoveave/user/views/header', 
    activate: true}">
</div>

Answer 2

May this be your problem?: "Activator callbacks are not executed unless an activator is present or activate:true is set on the compose binding."

Source: http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks/

Answer 3

Do you see any errors in the console window of your browser? (Hit F12 in Chrome and then click the console tab).

I suspect you will have some errors that are stopping the view model from activating. Otherwise, you could try these changes:

shell:

define(function(require) {
    var router = require('durandal/plugins/router'),
        system = require('durandal/system'); // note the semi colon here

    return {
        router: router,
        activate: function () {
            var self = this;
            router.mapAuto('ui/user/viewmodels');
            // the line below to map the route to your view model may be required
            router.mapRoute('dashboard');
            system.log('Sheel Activate Called');
            return router.activate('dashboard');
        };
    };
});

header view model:

define(function (require) {
    var router = require('durandal/plugins/router'),
        system = require('durandal/system');

    var userInfo = ko.observable('');

    return {
        router: router,
        userInfo: userInfo, // putting the property here should make it visible to the binding in the view
        activate: function () {
             system.log('Got Called Now');
             //do some ajax stuff here and update userinfo
        }
    };
});