Rectangle 27 0

javascript How to bind a Knockout js model to a wizard style UI?


@RPNiemeyer I am using ASP.net MVC 4 and have a [Serializable] wizard that uses separate pages (from an MVC book) and is also using [DataAnnotations] with client-side validation. I'm wondering if your updated sample would work to replace the pages but continue using the validation. Any thoughts?

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

I'm implementing something similar, and one thing you can do instead of null checking data-bindings is just adding a binding for visible:. If it's a truthy value, like a string or object, the visible evaluates nulls and empty strings as false and hides the element. Would not recommend for numeric values, especially if you want it to display for zeroes.

KO 2.0+ no longer requires jQuery Templates to do templating. The samples in this answer were referencing KO 1.2.1. I updated both fiddles that I posted to reference KO 2.1 without jQuery Templates.

Thanks, Ryan. A very interesting and creative approach. As I'm fairly well into my development now I may try and get by with guarding uninitialized properties with "data-bind='if: xxx" statements which seems to be working for now. Your solution if far more elegant though! PS - Great fan of your blog (www.knockmeout.net). Keep up the fantastic work!

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.

Note