Question

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 view
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?

Answer 1

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);