如何将Knockout js模型绑定到向导样式UI [英] How to bind a Knockout js model to a wizard style UI

问题描述

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

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:

• 如果用户在步骤1中选择是，则显示步骤2a


• 如果用户在步骤1中选择否，则显示步骤2b（即，不同的对话框形式）

这是继续所以通过向导的路径不是线性的。

This goes on so that the paths through the wizard are not linear.

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

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).

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

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!

推荐答案

我觉得这很好做的方式这是让您的视图模型是一个步骤数组，并将您的UI绑定到selectedStep。然后，每个步骤都可以动态选择要使用的模板（如 post ）。

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).

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

Here is a rough sample of the idea: http://jsfiddle.net/rniemeyer/SSY6n/

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

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.

这篇关于如何将Knockout js模型绑定到向导样式UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！