Backbone.js Multi-Step Form

Question

I\'m looking to make a step by step form for an \"instant quote\" type of thing on my website. I made the following image on photoshop, it\'s pretty self-explanatory that I want

Answer 1

I would structure it as follows:

1. Implement model for data to be collected

Have a single model which collects the data across the stages. Implement storage of this model, and allow partially-completed data. (You'll probably want to store this at each stage, so the user can come back at a later date).

2. Implement a generic 'multi-stage' view

This should be responsible for rendering the tabs/stages at the top, rendering navigation elements for backwards/forwards, and for rendering a sub-view.

3. Implement specific sub-views for each stage

These should operate on bits of the above model.

4. Implement routing

You might want different URL routes for each sub-view, or you might want the same URL for the whole multi-stage process. Either way, the router needs to create the outer multi-stage view and the inner sub-view (or views), and connect them together, together with the appropriate model.

5. Hint: make use of pub/sub

Don't couple your views tightly. Use some form of pub/sub to raise and listen to custom events. (For example: http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/)

Answer 2

To addition to stusmith, I just made an example of a backbone js multistep form. Feel free to have a look and copy it.

https://github.com/michaelkoper/backbone-multistep-form