I’m getting ready to build a really long multi-step form and i’d love to know how you handle an 8-10 step ‘checkout’ flow. I have an example of what i’m currently using (IR)
I’d really like to move it out of the Router controller and keep everything in a set of ‘components’ (blaze templates and js files in one folder basically) and have the parent ‘page’ template handle all the state for each step.
It has to have next and back buttons. Also I think handling the browser’s back button would be needed for good UX. The browser’s back button is tripping me up with keeping all the state in the parent template.
Prev. i’ve used an IR controller with query params for each step, along it having it set a state dict. for reactive. This works for basic state if you want to save state for each step it get’s really hairy.
Here’s an example of that:
PostsController.New = AppController.extend({
template: 'postsNew',
action: function() {
var query = this.params.query;
// parent template with named yield 'stepContent'
this.render('postsNew');
switch(query.step) {
case '2':
this.state.set('stepNumber', 2);
this.render('postsNewBar', {to: 'stepContent'});
break;
case '3':
this.state.set('stepNumber', 3);
this.render('postsNewBaz', {to: 'stepContent'});
break;
default:
this.state.set('stepNumber', 1);
this.render('postsNewFoo', {to: 'stepContent'});
}
}
});