如何将Knockout js模型绑定到向导样式UI

Question

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

• 如果用户在步骤1中选择"是",则我显示步骤2a
• 如果用户在步骤1中选择"否",则显示步骤2b(即,不同的对话框形式)

这样下去,通过向导的路径不是线性的.

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

一个更好的方法可能是在显示它们时绑定到UI步骤,但我的问题就在那里我不知道一旦步骤完成就"取消绑定"模型的好方法所以我最终可能会遇到步骤绑定到原始列表中的多个对象!

Answer 1

我认为这样做的一个好方法是让您的视图模型成为一系列步骤,并将您的UI绑定到"selectedStep".然后,每一个步骤可以动态地选择它想要哪个模板(在这个喜欢使用后).

以下是该想法的粗略示例:http://jsfiddle.net/rniemeyer/SSY6n/

这样,模板绑定基于所选择的步骤来处理生成/绑定/清理动态内容.如果步骤在observableArray中,那么您甚至可以动态添加步骤.也许您有一个所有可能步骤的列表,然后有一个"activeSteps"数组,表示根据用户的选择当前有效的步骤.