CODEWITHSUNDEEP
javascriptdurandal
Byron Sommardahl
Byron Sommardahl

Reputation: 13002

Attach view only after all composed modules are activated in DurandalJS.

I have a main view with two sub-views (using DurandalJS composition). Right now, the main view's viewAttached event is firing early while my sub-views are still dealing with ajax requests. Ideally, the main view would only attach the view to the DOM and run the transition AFTER all composed sub-views have finished activating. 

<h1>Hello World</h1>    
<div data-bind="compose: { model: 'viewmodels/subview1', activate: true }">Loading...</div>    
<div data-bind="compose: { model: 'viewmodels/subview2', activate: true }">Loading...</div>

Upvotes: 1

Views: 1721

Answers (1)

Joseph Gabriel
Joseph Gabriel

Reputation: 8510

The most straight-forward way to handle this is to manually activate the sub-views during the activation of the main view.

Remove the activate:true from the sub-view compose bindings, and in your main VM do something like this:

//in main view model
var subViewModel1 = require("viewModels/subViewModel1");
var subViewModel2 = require("viewModels/subViewModel2");

function activate() {
    return $.when(
        subViewModel1.activate(),
        subViewModel2.activate()
    ).then(function () {
        //finish your main view's activation here
        ...
    });
}

Make sure your main VM returns a promise that only resolves when the sub-VMs have completed their activation. Likewise, the sub-VMs should ensure that their activate function returns a promise that only resolves when the AJAX request for that sub-VM is completed.

There's a thread in Durandal Groups that discusses a similar concept. If you haven't already, it's definitely worth reading up a bit on the docs also, specifically these related to your question:

Upvotes: 3

Related Questions