如何將Knockout js模型綁定到嚮導樣式UI

Question

我正在使用Knockout js。我有一個包含對象數組的視圖模型，我想讓用戶使用嚮導樣式界面編輯其中一個對象。 我遇到的問題是嚮導會根據做出的選擇顯示不同的步驟。例如：

• 如果用戶選擇「是」的步驟1則我顯示步驟2a
• 如果用戶選擇「否」上然後我顯示步驟2b步驟1（即，不同的對話形式。）

這會繼續，以便通過嚮導的路徑不是線性的。

我的問題是做我綁定所有在視圖模型可能嚮導用戶界面的步驟啓動即使永遠不會顯示的一些步驟和某些屏幕的綁定將是無效的（例如，第5步可以結合viewModel.theObject.PropertyA.PropertyB.PropertyC（），但PropertyB在步驟1仍爲空）。

更好的方式可能是綁定到UI步驟，因爲它們顯示，但我的問題是在那裏我沒有意識到一旦步驟完成後「解除綁定」模型的好方法，所以我最終可能綁定到來自原始列表的多個對象的步驟！

Answer 1

我認爲這樣做的好方法是讓您的視圖模型成爲一組步驟並將您的UI綁定到「selectedStep」。然後，每個步驟都可以動態選擇要使用的模板（如在此post中）。

這裏是思想的一個粗略的樣本：http://jsfiddle.net/rniemeyer/SSY6n/

這樣的模板綁定處理生成/裝訂/清理基於動態選擇任何步驟上的內容。如果這些步驟位於observableArray中，那麼您甚至可以動態添加步驟。也許你有一個所有可能的步驟的列表，然後有一個「activeSteps」數組，代表基於用戶的選擇當前有效的步驟。