javascript - 如何将 Knockout js 模型绑定(bind)到向导式 UI

Question

我正在使用 Knockout js。我有一个包含对象数组的 View 模型，我想允许用户使用向导样式界面编辑其中一个对象。 我遇到的问题是向导会根据所做的选择显示不同的步骤。例如:

• 如果用户在第 1 步选择"is"，那么我会显示第 2a 步
• 如果用户在第 1 步选择“否”，那么我会显示第 2b 步(即不同的对话框形式)

这样下去，通过向导的路径就不是线性的了。

我的问题是我是否在启动时将所有可能的向导 UI 步骤绑定(bind)到 View 模型，即使某些步骤永远不会显示并且某些屏幕上的绑定(bind)无效(例如步骤5 可能绑定(bind)到 viewModel.theObject.PropertyA.PropertyB.PropertyC() 但 PropertyB 在步骤 1 中仍然为空)。

更好的方法可能是在显示时绑定(bind)到 UI 步骤，但我的问题是我不知道在步骤完成后“解除绑定(bind)”模型的好方法，所以我可能会得到步骤绑定(bind)到原始列表中的多个对象!

Answer 1

我认为执行此操作的一个好方法是让您的 View 模型成为一系列步骤并将您的 UI 绑定(bind)到“selectedStep”。然后，每个步骤都可以动态选择它想要使用的模板(如 post 中所示)。

这里是这个想法的粗略示例:http://jsfiddle.net/rniemeyer/SSY6n/

通过这种方式，模板绑定(bind)可以根据选择的任何步骤处理生成/绑定(bind)/清理动态内容。如果步骤在 observableArray 中，那么您甚至可以动态添加步骤。也许您有一个包含所有可能步骤的列表，然后有一个“activeSteps”数组，表示根据用户的选择当前有效的步骤。