How to control order of view activation in Durandal - durandal

Question

I am building an application with Durandal 2.0.
My shell view looks like this:
<div>
<header id="nav" data-bind="compose: 'viewmodels/nav', activate: false">
</header>
<section id="content" class="main container-fluid" data-bind="router: { transition: 'entrance' }, activate: false" style="overflow: auto">
</section>
<footer>
<!--ko compose: {view: 'footer'} --><!--/ko-->
</footer>
</div>
In the nav section, I want to have my tabs and a drop-down list of users (both of which are retrieved from a web service). Selecting a user from the dropdown will navigate to a new URL which will update the content section. (the route looks something like localhost/#user1/tab2).
Problem: I need to know the selected user from the nav section before I can retrieve the data for the content section, but the content section is activating before I have retrieved the users.
This is really only an issue for the initial page load, since the user list is only retrieved once.
Is there a way to tell the content section to wait until the nav section is done loading?
Is there a better way to go about this than what I'm doing?
The nav activate function looks like this:
function activate(context) {
return dataservice.getUsers().then(function () {
//do stuff
});
});
This activate function gets called first, and dataservice.getUsers() is called, but then the activate function of the content module gets called before the "do stuff" part happens (and before the data from the getUsers call is returned in the dataservice). Maybe there's a problem with my promises?
Edit
I've put together a dFiddle with some actual code that shows what I'm talking about: http://jerrade.github.io/dFiddle-2.0/#test/dashboard
The code is here: https://github.com/jerrade/dFiddle-2.0
nav.js
function activate(context) {
console.log('Nav View Activated');
if (vm.impersonateUsername == undefined)
vm.impersonateUsername = getUsernameFromWindowLocation();
return dataservice.getPageDetailForEmployee(vm.loggedInUsername, vm).then(function () {
console.log("Page details retrieved");
// I want to do something here before the dashboard activates.
});
}
dashboard.js
function activate(username) {
console.log('Dashboard View Activated');
//vm.username = nav.selectedImpersonateEmployee().Username;
return dataservice.getDashboard(nav.impersonateUsername, dashboard);
}
Open the page and watch the console. You'll see (among other things)
Nav View Activated
Dashboard View Activated
Page details retrieved
What I really want is for the Page details to be retrieved before the Dashboard view activates. I've actually rejiggered things so that this isn't currently a problem anymore, but it may crop again down the road.
It doesn't seem like what I'm trying to do should be this complicated. Unless I'm pounding a square peg into a round hole here?

Answer 1

The easiest thing to do would be to add an observable called something like isUserLoaded on your view model. Then, apply an if binding around the content section:
<div>
<header id="nav" data-bind="compose: 'viewmodels/nav', activate: false">
</header>
<!-- ko if: isUserLoaded -->
<section id="content" class="main container-fluid" data-bind="router: { transition: 'entrance' }, activate: false" style="overflow: auto">
</section>
<!-- /ko -->
<footer>
<!--ko compose: {view: 'footer'} --><!--/ko-->
</footer>
</div>
Once you've loaded the user, you can update the observable to true and your content binding should fire.
Edit
If that does't work it sounds like your router must still be resolving the content view model (which may point to a routing problem? Hard to say without seeing your entire solution).
Anyway, if its not a routing issue, then you could employ a solution where your content model returns an unresolved promise from its activate method; then resolve that promise when the user is loaded. For example, something along these lines:
userModel.js:
define([], function () {
// single instance to track the loaded user
var userModel = {
selectedUser: ko.observable()
};
return userModel;
});
navModel.js:
define(["dataService", "userModel"], function(dataService, userModel) {
// view model for the nav bar
var navModel = {
// model definition
};
// load the user
navModel.activate = function() {
return dataService.getUsers().then(function(response) {
// Push the user to the userModel
userModel.selectedUser(response.user);
});
};
return navModel;
});
contentModel.js:
define(["userModel"], function (userModel) {
var contentModel = {
// model definition
};
contentModel.activate = function () {
// Prevent activation until user is resolved
var deferred = $.Deferred();
var subscription = userModel.selectedUser.subscribe(function (user) {
if (!user)
return;
subscription.dispose();
deferred.resolve();
});
return deferred.promise();
};
return contentModel;
});
If you don't want to use an observable for the userModel.selectedUser property, you could instead use another deferred, or fire an event when the user is loaded, etc etc. Whatever floats your boat!