Based on the way you laid out the UI, I think I'd do something like this in the router:
App.Router.map(function() {
this.resource('wizard', function() {
this.route('step1');
this.route('step2');
this.route('step3');
});
});
Then, have a wizard
template that looks like this:
{{#link-to 'wizard.step1'}}Step 1{{/link-to}}
<div {{bind-attr class='step1Expanded}}>{{outlet 'step1'}}</div>
{{#link-to 'wizard.step2'}}Step 2{{/link-to}}
<div {{bind-attr class='step2Expanded}}>{{outlet 'step2'}}</div>
{{#link-to 'wizard.step3'}}Step 3{{/link-to}}
<div {{bind-attr class='step3Expanded}}>{{outlet 'step3'}}</div>
Then, inside each of the step
routes, you would need to override renderTemplate so that it will render in the appropriate outlet, like this:
App.WizardStep1Route = Ember.Route.extend({
renderTemplate: function() {
this.render({outlet: 'step1'});
}
});
Finally, inside the WizardController
, you would need to add computed properties to handle the step1Expanded
logic being applied to the classes so you can know which one is displaying at any given time.
All this will allow you to load different models per step and will also allow you to handle model validation logic inside your routes. For example, if you cannot proceed to step3 until step1 and step2 are completed, you can add logic to handle that inside the step1 and step2 routes.