Durandal how to attach view and don't show it untill it's ready?

Question

Here is unusual scenario I'm trying to implement: I got gmap module where Google Maps is asynchronously loads. I'm using following code to properly attach Google Maps:

 composition.addBindingHandler('googleMap', {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            gmap = ko.utils.unwrapObservable(valueAccessor());

            var latLng = new gmaps.LatLng(37.774107,-122.420853);
            var mapOptions = {
                center:latLng,
                zoom: 17,
                disableDefaultUI: true,
                mapTypeId: gmaps.MapTypeId.ROADMAP
            };

            gmap.googleMap = new gmaps.Map(element, mapOptions);
            navigator.geolocation.getCurrentPosition(onSuccess, onError);
        }
    });

My gmap module is module which I want to show first after the user login. So I want to perform some actions before this module should be shown. In most cases I could use a Promise in canActivate method, but! In this case, my module doesn't attached. But I need to attach this module, perform some operations (get database records, determine user geolocation, add markers on the Google Map based on this data) and only when it's done show the module to user. How can I get this works? I tried Promises but it didn't works for me, because I listen to attached method which doesn't fires until the module is shown. So the question: How to activate and attach viewmodel and it's appropriate view (activate and attached callbacks should fire) but don't show it until the condition?

UPDATE: Okay, it seems to my question is not really clearly understandable. Here is the my scenario:
1. My SignIn module activated. User should type his credentials.
2. Once the authorization return success Gmap module should be activated and attached, but don't shown. User should still see the SignIn module and message like 'Loading data...'
3. Gmap module should be fully loaded (all the callbacks should fire). I need a possibility to interact with DOM, that means that module should be attached. But don't shown.
4. Once the some conditions is true, SignIn module comes invisible and Gmap is shown.

Promise in the activate call back doesn't fits this scenario, because view doesn't attached till the promise resolved. Basically I need something like this after the success authorization:

router.navigate('#gmap', { show: false });
...or...
router.attachModule('#gmap', ...{});

Why do I need to interact with DOM and why Promise in activate callback doesn't fits me? Because I need initiated Gmap object which can be initiate only with existing gmap canvas on the page:

 composition.addBindingHandler('googleMap', {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            gmap = ko.utils.unwrapObservable(valueAccessor());
            var mapOptions = {
             ...

            };

            gmap.googleMap = new gmaps.Map(element, mapOptions);

        }
    });

And HTML:

<div id="gmap-section">
    <div id="gmap-canvas" data-bind="googleMap:map"></div>
</div>

Bindings will work only once the view attached.

Answer 1

I don't yet fully understand your question but I'll try to give you some food for thought. The ViewModel, in best practice, should only be responsible for pure visual related stuff. So any heavy calculation, DB connection or whatever else should be pulled out into a separate Service. In case of Durandal this would be just a simple RequireJS module. This one should be a singleton and can be required by multiple VMs.

By doing so it's not absolutely necessary to immediately pull in the new VM but start the calculation while in SignIn and when done continue loading the new GMapVM.

As for how to do that, either you launch the Service call in SignIn and on Promise done navigate to GMapVM, or make use of the Durandal built in Pub/Sub process if you dislike Promises.

---

As of Durandals internal system maybe canActivate from GMapVM would be also a suitable solution or alternatively canDeactivate from SignInVM

Answer 2

If your activate method returns a promise Durandal's router will wait until that promise is resolved before routing to the new route as mentioned in the docs - http://durandaljs.com/documentation/Using-The-Router.html

If you want to can even just create your own promise and use setTimeout to demonstrate in your app.

function activate () {
    var promise = Q.deferred();
    setTimeout(function () { promise.resolve(true); }, 5000);
    return promise;
}

This will return a promise to Durandal's router and then 5 seconds later it will resolve the promise. You should see the old route until the promise is resolved.

Edit

Ok, stating the obvious here but it sounds like from the comments that you are having a problem between the time activate is completed and the attached callback completes. Going off what I said before this a quick and easy way to do what it sounds like you are trying to accomplish, but it is difficult to be sure because I don't quite understand what you are asking...

var showGmapStuff = ko.observable(false);

function activate () {
    var promise = Q.deferred();
    initializeStuff(promise);
    return promise;
}

function initializeStuff(promise) {
    connecttoserver();
    dootherstuff().then(finished);

    function finished() {
        promise.resolve(true);
    }
}

function attached () {
    showGmapStuff(true);
}

And in your view -

<div data-bind="if: showGmapStuff">
    <div data-bind="gmap: mapdata"></div>
</div>

In this scenario the gmap binding won't exist until the activate returns a promise and the attached callback sets showGmapStuff to true. This way instead of it being visible false it will not be evaluated at all until you want it to.