2011-09-15 17 views
10

Używam Knockout js. Mam model widoku, który zawiera tablicę obiektów i chcę umożliwić użytkownikowi edycję jednego z obiektów przy użyciu interfejsu w stylu kreatora. Problem, który mam, to kreator pokaże różne kroki w zależności od dokonanych wyborów. Na przykład:Jak powiązać model knockout js z interfejsem w stylu kreatora UI

  • Jeśli użytkownik wybierze opcję „Tak” w kroku 1, a następnie wyświetlać krok 2a
  • Jeśli użytkownik wybierze opcję „Nie” w kroku 1, a następnie wyświetlać krok 2b (czyli inną formę dialogowe).

Dzieje się tak, że ścieżki przez kreatora nie są liniowe.

Moje pytanie dotyczy: czy wiążę wszystkie możliwe kroki Kreatora interfejsu użytkownika z modelem widoku przy uruchamianiu, mimo że niektóre kroki nigdy nie będą wyświetlane, a powiązania na niektórych ekranach będą nieprawidłowe (np. Krok 5 może być powiązany z viewModel.theObject.PropertyA.PropertyB.PropertyC(), ale PropertyB nadal ma wartość NULL w kroku 1).

Lepszym sposobem może być powiązanie z etapami interfejsu użytkownika, ponieważ są one wyświetlane, ale mój problem polega na tym, że nie jestem świadomy dobrego sposobu na "odwiązanie" modelu po zakończeniu etapu, więc mogłem skończyć z krok związany z wieloma obiektami z oryginalnej listy!

Odpowiedz

13

Myślę, że dobrym sposobem na zrobienie tego jest posiadanie modelu widoku jako szeregu kroków i powiązanie interfejsu użytkownika z "wybranym krokiem". Następnie każdy krok może dynamicznie wybrać, który szablon chce użyć (jak w tym post).

Tutaj jest szorstka próbka pomysł: http://jsfiddle.net/rniemeyer/SSY6n/

ten sposób powiązania szablon obsługuje generowania/wiążącą/sprzątanie dynamicznej zawartości w oparciu o cokolwiek krokiem jest zaznaczona. Jeśli kroki znajdują się w obserwowalnej tablicy, możesz nawet dynamicznie dodawać kolejne kroki. Może masz listę wszystkich możliwych kroków, a następnie macie "activeSteps", która reprezentuje kroki, które są obecnie ważne na podstawie wyborów użytkownika.

+3

Nieco uaktualniona tutaj: http://jsfiddle.net/rniemeyer/FyuSD/ –

+0

Dzięki, Ryan. Bardzo interesujące i kreatywne podejście. Ponieważ jestem dość dobrze w moim rozwoju, teraz mogę próbować zabezpieczyć niezainicjowane właściwości za pomocą instrukcji "data-bind =" if: xxx ", która na razie działa. Twoje rozwiązanie, o ile jest bardziej eleganckie! PS - Wielki fan twojego bloga (www.knockmeout.net). Utrzymaj fantastyczną pracę! –

+0

@RPNiemeyer Używam ASP.net MVC 4 i mam '[Serializable]' wizard, który używa oddzielnych stron (z książki MVC) i używa również '[DataAnnotations]' z walidacją po stronie klienta. Zastanawiam się, czy zaktualizowana próbka mogłaby zastąpić strony, ale nadal używać sprawdzania poprawności. jakieś pomysły? – REMESQ

Powiązane problemy