Как связать модель Knockout js с пользовательским интерфейсом в стиле мастера - PullRequest
Новая
       30

Как связать модель Knockout js с пользовательским интерфейсом в стиле мастера

10 голосов
/ 15 сентября 2011

Я использую Knockout js. У меня есть модель представления, которая содержит массив объектов, и я хочу позволить пользователю редактировать один из объектов, используя интерфейс в стиле мастера. У меня проблема в том, что мастер покажет разные шаги в зависимости от того, какой выбор сделан . Например:

  • Если пользователь выбирает «Да» на шаге 1, тогда я отображаю шаг 2a
  • Если пользователь выбирает «Нет» на шаге 1, тогда я отображаю шаг 2b (т.е. другую диалоговую форму)

Это происходит так, что пути через мастера не являются линейными.

У меня вопрос связать ли я все возможные шаги пользовательского интерфейса мастера с моделью представления при запуске , хотя некоторые шаги никогда не будут отображаться и привязки на некоторых экранах будут недействительными (например, шаг 5 может связываться с viewModel.theObject.PropertyA.PropertyB.PropertyC (), но PropertyB все еще нулевой на шаге 1).

Лучшим способом может быть привязка к шагам пользовательского интерфейса по мере их отображения, но моя проблема заключается в том, что я не знаю хорошего способа «открепить» модель после завершения шага, чтобы я мог в итоге получить шаг, связанный с несколькими объектами из исходного списка!

1 Ответ

13 голосов
/ 15 сентября 2011

Я думаю, что хороший способ сделать это состоит в том, чтобы ваша модель представления была массивом шагов и связывала ваш пользовательский интерфейс с "selectedStep". Затем каждый шаг может динамически выбирать, какой шаблон он хочет использовать (как в этом посте ).

Вот примерный пример: http://jsfiddle.net/rniemeyer/SSY6n/

Таким образом, привязки шаблона обрабатывают / связывают / очищают динамический контент в зависимости от выбранного шага. Если шаги находятся в observableArray, то вы можете даже динамически добавлять шаги. Возможно, у вас есть список всех возможных шагов, а затем массив «activeSteps», который представляет шаги, которые в настоящее время действительны на основе выбора пользователя.

...