Durandal view composition order -

durandal 2.0 - view composition order

i have view, has number of child views using break html separate files.

index.html(index.js)      - menu.html      - header.html      - footer.html 

the menu view populated index view after it's loaded.

inside index.html compose menu view (there no module menu.js, html composition here):

<!--ko compose: {  view: 'menu'}--><!--/ko--> 

the problem order of view composition.

i have attached event wired in index.js calls function populate menu div that's sat in menu.html.

but, attached view event called before menu.html view has been composed.

the events looks console:

binding views/footer  binding views/index  binding complete: <section data-view=​"views/​index" style=​"display:​ none;​">​…​</section>​ [index]  main view attached  binding views/header  binding views/menu  binding views/menudropdown 

so, main view attached before children.

is there way change composition order, or wait child views composed/loaded before main view attached/complete?

thanks

the short answer "no" - can't change composition order.

the longer answer: perhaps i've misunderstood, sounds little bit suspicious you're populating menu div view model. use custom binding instead? if can in binding, have @ using delayed binding handler. documentation:

sometimes binding handler needs work element after attached dom , when entire composition of view complete. example of code needs measure size of html element. durandal provides way register knockout binding handler not execute until composition complete. this, use composition.addbindinghandler.

alternatively, if you're happy whatever code running in viewmodel, want use compositioncomplete event rather attached event. memory, attached events run parent child (which why event being called on index before menu has been composed). in contrast, compositioncomplete bubbles child parent:

finally, when entire composition process complete, including parent , child compositions, composition engine call compositioncomplete(view, parent) callback, bubbling child parent.

you can attach compositioncomplete handler on viewmodel in same fashion activate method:

// secured shell define([], function () {     var viewmodel = {         activate: function () {             // stuff         },          compositioncomplete: function (parent, child, settings) {             // more stuff             debugger;         }     };      return viewmodel; }); 

hope helps.