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

Question

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

• 如果用户在步骤1上选择“Yes”，则显示步骤2a
• 如果用户在步骤1上选择“否”，则显示步骤2b（即不同的对话框表单）

这种情况会持续下去，使得通过向导的路径不是线性的。

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

更好的方式可能是根据它们的显示绑定到UI步骤，但我的问题是我不知道一种良好的方法来在步骤完成后“解除绑定”模型，因此我最终可能会将该步骤绑定到来自原始列表的多个对象上！

- Mark Robinson

Answer 1

我认为一个好的做法是将你的视图模型(view model)设为步骤数组，并将UI绑定到"selectedStep"。然后，每个步骤都可以动态选择它想要使用的模板（就像在这个文章中所示）。

以下是这个想法的简单示例：http://jsfiddle.net/rniemeyer/SSY6n/

这样一来，模板绑定会根据所选的步骤动态生成/绑定/清理相关的内容。如果步骤在observableArray中，那么甚至还可以动态地添加步骤。也许你有一个包含所有可能步骤的列表，然后有一个"activeSteps"数组代表根据用户的选择当前有效的步骤。

- RP Niemeyer

---

我正在实现类似的东西，你可以做的一件事是，不要检查数据绑定是否为空，而是只需添加一个 visible: 绑定。如果它是一个真值，比如字符串或对象，visible 会将 null 和空字符串评估为 false 并隐藏元素。不建议用于数字值，特别是如果您希望它显示零。 - Patrick M

嗨，Niemeyer，我正在尝试使用你的例子。然而，在源代码中它引用了http://www.aegema.com/jsfiddle/jquery.tmpl.min.js。如果没有引用这个脚本，它就无法工作。你能告诉我那个脚本里面有什么吗（因为它被最小化了，我看不懂）？我原以为ko.js、jquery.js和自定义js来实现视图模型和函数就足够了。 - Mounhim

KO 2.0+不再需要jQuery模板来进行模板化。本答案中的示例是参考KO 1.2.1的。我已经更新了我发布的两个fiddles，以引用KO 2.1而不使用jQuery模板。 - RP Niemeyer

抱歉，但有人知道为什么一些HTML代码被包含在脚本标签中吗？你为什么需要它们？ - AlbatrossCafe

@AlbatrossCafe - 在撰写本答案时，Knockout尚未支持其本地模板引擎（使用“with”，“foreach”，“if”绑定内联），因此它仅使用template绑定。脚本标记是模板。 - RP Niemeyer