How do I make the transition wait until my data is loaded before disappearing?

Question

I'm using HotTowel/Durandal for an SPA. On my home page, I've got the normal entrance transition in my main.js:

app.setRoot('viewmodels/shell', 'entrance');

This ends up routing to my home.js class. What I've done right now is in the activate function, I've made an ajax call to get the data

function viewAttached() {
    return add(app.baseUrl + '/api/Customer/1/Animals');
}

My view has a div that is only shown once the array is not empty:

<div class="animal-results" data-bind="visible: visible()">

The problem I'm running in to is the entrance transition with a progress bar shows, and then it disappears. When it disappears, the data is not yet returned from the server, so the page looks blank for a second or two and then pops on when the view model is updated.

How do I make sure that the transition stays on the screen until either the data or an error is returned from the server?

Answer 1

From DurandalJS Docs

- The composition engine looks for an activate callback. If any activationData is specified in the compose binding, then that is passed as an argument. If the activate callback returns a promise, the composition engine will wait for its resolution before proceding.

• I don't know your code detailed but I think the problem in here is you are just doing an AJAX Call which doesn't return a promise, so your router just navigates to the related view without waiting for the response.

Example Code

return {
    activate: function () {
        var self = this;
        return $.getJSON('http://whatever/').then(function (receivedData) {
            self.data= receivedData;
        });
    }
}