Wie bindet man ein Knockout js-Modell an eine Wizard-ähnliche UI

Question

Ich verwende Knockout js. Ich habe ein Ansichtsmodell, das ein Array von Objekten enthält, und ich möchte dem Benutzer erlauben, eines der Objekte mit einem Assistenten Stil Schnittstelle zu bearbeiten. Das Problem, das ich habe, ist, dass der Assistent verschiedene Schritte anzeigt, je nachdem, welche Auswahl getroffen wird . Zum Beispiel:

• Wenn der Benutzer in Schritt 1 "Ja" auswählt, wird Schritt 2a angezeigt.
• Wenn der Benutzer in Schritt 1 "Nein" auswählt, wird Schritt 2b angezeigt (d. h. ein anderes Dialogformular)

Das geht so weiter, dass die Wege durch den Assistenten nicht linear sind.

Meine Frage lautet Binde ich alle möglichen UI-Schritte des Assistenten beim Start an das Ansichtsmodell? auch wenn einige Schritte nie angezeigt werden und die Bindungen auf einigen Bildschirmen ungültig sind (z. B. kann Schritt 5 an viewModel.theObject.PropertyA.PropertyB.PropertyC() binden, aber PropertyB ist bei Schritt 1 immer noch null).

Ein besserer Weg kann zu binden, um die UI-Schritte, wie Sie angezeigt werden, aber mein Problem ist dann gibt es ich bin mir nicht bewusst, eine gute Möglichkeit, "unbind" das Modell, sobald der Schritt abgeschlossen ist, so dass ich am Ende mit dem Schritt gebunden an mehrere Objekte aus der ursprünglichen Liste könnte!

Answer 1

Ich denke, dass eine gute Möglichkeit, dies zu tun ist, um Ihre Ansicht Modell ein Array von Schritten und binden Sie Ihre UI an die "selectedStep". Dann kann jeder Schritt dynamisch wählen, welche Vorlage er verwenden möchte (wie in diesem Beitrag ).

Hier ist ein grobes Beispiel für die Idee: http://jsfiddle.net/rniemeyer/SSY6n/

Auf diese Weise übernimmt die Vorlagenbindung das Erzeugen/Binden/Aufräumen des dynamischen Inhalts, je nachdem, welcher Schritt ausgewählt wurde. Wenn die Schritte in einem observableArray sind, dann könnten Sie sogar dynamisch Schritte hinzufügen. Vielleicht haben Sie eine Liste aller möglichen Schritte und dann eine "activeSteps" Array, das die Schritte, die derzeit gültig sind auf der Grundlage der Entscheidungen des Benutzers darstellt.