Activate Function in composed view in Durandal - 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
}
};
});