Многоэтапная форма Backbone.js

Я хочу сделать пошаговую форму для типа "мгновенной цитаты" на моем сайте. Я сделал следующее изображение на фотошопе, довольно понятно, что я хочу, чтобы пользователь вводил информацию на каждом этапе формы и в конечном итоге отправлял форму на шаге 3 (переход на следующий шаг должен быть бесшовным, без перезагрузки страницы),

enter image description here

Может кто-нибудь, пожалуйста, дайте мне некоторые общие указания, как я должен это делать? Это мой первый проект с использованием backbone.js, и это действительно поможет получить обзор на высоком уровне о том, как лучше всего подойти к этому конкретному виджету.

Спасибо

Ответ 1

Я бы структурировал его следующим образом:

1. Реализация модели для сбора данных

У вас есть одна модель, которая собирает данные по этапам. Внедрите хранилище этой модели и разрешите частично заполненные данные. (Вероятно, вы захотите сохранить это на каждом этапе, чтобы пользователь мог вернуться позже).

2. Реализовать общий "многоступенчатый" вид

Это должно отвечать за отображение вкладок/этапов вверху, отображение элементов навигации назад/вперед, а также для отображения под-представления.

3. Внедрение определенных подзадач для каждого этапа

Они должны работать на битах вышеуказанной модели.

4. Реализация маршрутизации

Возможно, вам понадобятся разные маршруты URL для каждого подзадача, или вам может понадобиться один и тот же URL для всего многоэтапного процесса. В любом случае маршрутизатору необходимо создать внешний многоступенчатый просмотр и внутренний под просмотр (или представления) и соединить их вместе вместе с соответствующей моделью.

5. Подсказка: используйте pub/sub

Не связывайте свои взгляды плотно. Используйте некоторую форму pub/sub, чтобы поднять и прослушать пользовательские события. (Например: http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/)

Ответ 2

В дополнение к stusmith, я просто сделал пример многопроцессорной формы jbbbb. Не стесняйтесь взглянуть и скопировать его.

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