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

【问题标题】：How to bind a Knockout js model to a wizard style UI如何将 Knockout js 模型绑定到向导样式的 UI
【发布时间】：2011-11-17 17:24:21
【问题描述】：

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

如果用户在步骤 1 中选择“是”，则显示步骤 2a
如果用户在第 1 步中选择“否”，那么我会显示第 2b 步（即不同的对话框形式）

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

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

更好的方法可能是在 UI 步骤显示时绑定到它们，但我的问题是我不知道在步骤完成后“取消绑定”模型的好方法，所以我可以最终得到步骤绑定到原始列表中的多个对象！

【问题讨论】：

标签： javascript mvvm knockout.js wizard model-binding

【解决方案1】：

我认为这样做的一个好方法是让您的视图模型成为一系列步骤并将您的 UI 绑定到“selectedStep”。然后，每个步骤都可以动态选择它想要使用的模板（就像在这个post 中一样）。

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

这样，模板绑定会根据选择的任何步骤处理生成/绑定/清理动态内容。如果这些步骤在 observableArray 中，那么您甚至可以动态添加步骤。也许你有一个所有可能步骤的列表，然后有一个“activeSteps”数组，它代表基于用户选择当前有效的步骤。

【讨论】：

谢谢，瑞恩。一种非常有趣和创造性的方法。由于我现在对我的开发已经相当了解了，我可以尝试使用“data-bind='if: xxx” 语句来保护未初始化的属性，这似乎是目前有效的。不过，您的解决方案要优雅得多！ PS - 你博客的忠实粉丝（www.knockmeout.net）。继续出色的工作！
@RPNiemeyer 我正在使用 ASP.net MVC 4 并且有一个 [Serializable] 向导，它使用单独的页面（来自 MVC 书籍）并且还使用 [DataAnnotations] 进行客户端验证。我想知道您更新的示例是否可以替换页面但继续使用验证。有什么想法吗？
我正在实现类似的东西，你可以做的一件事是为可见的数据绑定添加一个绑定，而不是检查空值：。如果它是一个真值，如字符串或对象，则可见值将 null 和空字符串评估为 false 并隐藏元素。不建议使用数值，特别是如果您希望它显示为零。
KO 2.0+ 不再需要 jQuery 模板来做模板。此答案中的示例引用了 KO 1.2.1。我更新了我发布的两个小提琴，以引用没有 jQuery 模板的 KO 2.1。
@AlbatrossCafe - 编写此答案时，Knockout 尚不支持其本机模板引擎（内联使用“with”、“foreach”、“if”绑定），因此它仅使用 @987654325 @ 捆绑。脚本标签是模板。