Ember.js - Creating a multistep wizard - How to?

Question

I need to create a wizard with multiple steps. Each step will display a form with options, and depending on the user choices, the wizard should go to a certain step, as well as

Answer 1

Answering an old question in case someone needs some answers.

You can use something like this Multi-step form (or multiple "pages") in one route using Ember.js

this utilizes 1 route and each step/page is shown or hidden using {{#if}} To answer Nino's question, when I implemented this I had an object in my controller keeping track of all the values of the form fields and updating it as I click on next. When you get to the last page where you submit, you can simply plug this object into your controller's submit function like this

submitSurvey: function() {
  var survey = this.store.createRecord('survey', this.get('surveyObj'));
  // surveyObj contains all the form field's values that you've been
  // keeping track of everytime you go from one step to another
  survey.save();
  this.transitionToRoute('somewhere'); // go somewhere after submitting the form
  this.set('firstPage', true); // make first page the page to show
  this.set('lastPage', false);
  this.init();
  // constructor's init contains code that empties all the form fields alternatively
  // you can create a separate function instead of using init
}

Good for simple implementation of a multi-page form. Problem I have with this is I have jQuery UI code that hooks into the view's didInsertElement and it works just that when I go from one step to another and come back (each page has 'next' and 'prev' buttons), I find that whatever the code that was ran at didInsertElement becomes undone. It's like the chunk of html code wasn't just hidden and re-shown. It was reloaded and thus all effects are gone.