Программируемый шаблон для содержимого модала

Question

У меня есть основная ViewModel и мой вид, который великолепен, и у меня есть модальное окно (fancybox) с довольно сложным потоком (как вы пройдете через 3 шага в этой модели).

Теперь ясоздали для этого новую ViewModel, вместо того, чтобы испортить основную ViewModel его проблемами.Итак, давайте назовем их MainViewModel, ModalViewModel соответственно.

Изначально я собирался внедрить модальные виды в основной вид с помощью некоторых шаблонов и просто заставить fancybox воспринимать их как содержимое.Однако в этом случае у меня будут дублированные элементы dom, что может быть опасно, так как могут быть дублированные идентификаторы элементов и т. Д.

Поэтому я подумал, что, возможно, мне следует просто попытаться найти способ использовать ajax для внедрения шаблоновв окно fancybox.

Просто чтобы подвести итог потока:

1. Пользователь входит в главное представление
2. Пользователь нажимает ссылку, которая открывает модальное окно
3. Пользовательзаполняет форму в модальном
4. Пользователь нажимает на подачу в модальном
5. Пользователь переходит на второй этап модальной формы
6. Пользователь заполняет форму 2 в модальном
7. Пользователь отправляетформа
8. пользователя отправляют на новую страницу

Так я правильно иду по этому пути?Или я должен включить ModalViewModel в MainViewModel как дочернюю viewModel и работать с ним таким образом?

Answer 1

Поскольку у вас есть контроль над именами идентификаторов шаблонов, почему бы просто не переименовать идентификаторы шаблонов в уникальные.

А что касается привязки к ModalViewModel, у вас может быть ViewModel, подобный этому:

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

и затем применить привязки к childViewModel вот так:

ko.applyBindings(MainViewModel.Modal);

если весь модальный вид это не просто шаблон, используйте перегрузку:

ko.applyBindings(MainViewModel.Modal,modalRootElement);

Answer 2

Вы должны включить модель в качестве дочернего элемента модели основного вида.

Парадигма КО - иметь одну модель / страницу вида.

Две модели представлений имели бы больше смысла, если бы вы использовали iframe в своем fancybox (но это добавляет свои сложности в плане синхронизации данных между двумя моделями представлений).