Ember.js multiple views for same controller OR wizard like routes; how to?

1
votes

Scenario:

You have something like a wizard. The user completes something on the first page, click next and go to second page and so on until he reaches the last page. Here he clicks finish and all his input is stored and persisted using an ember model.

There are two other questions similar to this one: Ember.js wizard control

Multi-step form (or multiple "pages") in one route using Ember.js

At first I've tried with a route/controller/view for each step, but since the answers are basically a controller's state variables and get lost while transitioning, it is obvious that it cannot work like this!

Then I took the approach described in the above links. One route, one controller, one template with lots of {{#if }} so that I show only the fields of the current step. I think I might improve this by using partials and so each step will have its own template.

The question is: is this the only/the best approach? Does anyone figured out a better way to implement such a flow?

2
ember.js

2 Answers

3
votes

If you make each wizard page a component and then pass the model as a template parameter to each component, you get a pretty nice workflow. The URL is stable (not constantly adding junk onto the end in order to pass state around); it's easy to drop the user into the first step whenever they enter the route (such as manually inputing the URL or perhaps more importantly, finishing the wizard and then hitting the browser's back button); and you can perform validation on each page of the wizard.

Check out my longer answer here

1
votes

One of the possible approaches would be using Query Parameters so that you can manage a state of each step in a single wizard controller.