Programmatically injecting template for modal's content

I have a main ViewModel and my view which is great, and I have a modal window (fancybox) with some quite complex flow (as you will go through 3 steps within that model).

Now I have created a new ViewModel for that, rather than taint the main ViewModel with its concerns. So lets call them MainViewModel, ModalViewModel respectively.

I was originally going to inject the modal views into the main view via some templates, and just get the fancybox to take them as contents. However this way I will be having duplicated dom elements, which could be dangerous as there may then be duplicated element Ids etc.

So I thought maybe I should just try and find a way to use ajax to inject the templates into the fancybox window.

Just to summarise the flow:

1. User enters main vi开发者_如何学Cew
2. User clicks link which 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 is sent to new page

So am I going about this the right way? Or should I be including the ModalViewModel within the MainViewModel as a child viewModel and dealing with it that way?

---

Since you have control over naming the ids of the templates, why not just rename the template ids to be unique.

And as far as binding to the ModalViewModel you could have a ViewModel like this:

var MainViewModel = {
  //other props
  Modal : new ModalViewModel()
};

and then applybindings to the childViewModel like so:

ko.applyBindings(MainViewModel.Modal);

if the whole modal view isn't just a template then use the overload of:

ko.applyBindings(MainViewModel.Modal,modalRootElement);

---

You should be including the model as a child of the main view model.

The paradigm of KO is to have one view model/page.

Two view models would make more sense if you were using an iframe in your fancybox (but this adds its own complications in terms of synchronizing data across the two view models).