javascript - Programatically injecting template for modal's content -

i have main viewmodel , view great, , have modal window (fancybox) quite complex flow (as go through 3 steps within model).

now have created new viewmodel that, rather taint main viewmodel concerns. lets call them mainviewmodel, modalviewmodel respectively.

i going inject modal views main view via templates, , fancybox take them contents. way having duplicated dom elements, dangerous there may duplicated element ids etc.

so thought maybe should try , find way use ajax inject templates fancybox window.

just summarise flow:

1. user enters main view
2. user clicks link spawns modal window
3. user fills out form in modal
4. user clicks submission in modal
5. user enters second stage of modal form
6. user fills out form 2 in modal
7. user submits form
8. user sent new page

so going right way? or should including modalviewmodel within mainviewmodel child viewmodel , dealing way?

since have control on naming ids of templates, why not rename template ids unique.

and far binding modalviewmodel have viewmodel this:

var mainviewmodel = {   //other props   modal : new modalviewmodel() }; 

and applybindings childviewmodel so:

ko.applybindings(mainviewmodel.modal); 

if whole modal view isn't template use overload of:

ko.applybindings(mainviewmodel.modal,modalrootelement);