如何将 Knockout js 模型绑定到向导风格的 UI
我正在使用 Knockout js。我有一个包含对象数组的视图模型，我希望允许用户使用向导样式界面编辑其中一个对象。 我遇到的问题是向导将根据所做的选择显示不同的步骤。例如：
- 如果用户在步骤 1 中选择“是”，则我显示步骤 2a
- 用户在步骤 1 中选择“否”，则我显示步骤 2b（即不同的对话框形式）
如果 向导不是线性的。
我的问题是我是否在启动时将所有可能的向导 UI 步骤绑定到视图模型，即使某些步骤永远不会显示并且某些屏幕上的绑定将无效（例如，步骤 5 可能会绑定到 viewModel.theObject.PropertyA.PropertyB.PropertyC() 但 PropertyB 在步骤 1) 中仍然为 null。
更好的方法可能是在显示的 UI 步骤时绑定到它们，但我的问题是，我不知道在步骤完成后“取消绑定”模型的好方法，因此我最终可能会将步骤绑定到原始列表中的多个对象！
I am using Knockout js. I have a view model that contains an array of objects and I want to allow the user to edit one of the objects using a wizard style interface. The issue I have is the wizard will show different steps depending on what choices are made. For instance:
- If the user selects 'Yes' on step 1 then I display step 2a
- If the user selects 'No' on step 1 then I display step 2b (ie. a different dialog form)
This goes on so that the paths through the wizard are not linear.
My question is do I bind all the possible wizard UI steps to the view model at start up even though some steps will never be shown and the bindings on some screens will be invalid (eg. step 5 may bind to viewModel.theObject.PropertyA.PropertyB.PropertyC() but PropertyB is still null at step 1).
A better way may be to bind to the UI steps as they are displayed but my problem is then there I am not aware of a good way to 'unbind' the model once the step has completed so I could end up with the step bound to multiple objects from the original list!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我认为实现此目的的一个好方法是让您的视图模型成为一系列步骤并将您的 UI 绑定到“selectedStep”。然后，每个步骤都可以动态选择要使用的模板（就像在这个 post< /a>）。
这是这个想法的一个粗略示例： http://jsfiddle.net/rniemeyer/SSY6n/
这样模板绑定就会处理根据选择的步骤生成/绑定/清理动态内容。如果步骤位于 observableArray 中，那么您甚至可以动态添加步骤。也许您有一个所有可能步骤的列表，然后有一个“activeSteps”数组，表示根据用户的选择当前有效的步骤。
I think that a good way to do this is to have your view model be an array of steps and bind your UI to the "selectedStep". Then, each step can dynamically choose which template that it wants to use (like in this post).
Here is a rough sample of the idea: http://jsfiddle.net/rniemeyer/SSY6n/
This way the template bindings handles generating/binding/cleaning up the dynamic content based on whatever step is selected. If the steps are in an observableArray, then you could even dynamically add steps. Maybe you have a list of all of the possible steps and then have an "activeSteps" array that represents the steps that are currently valid based on the user's choices.