11

私は自分のウェブサイトで「インスタント見積もり」タイプのもののステップバイステップフォームを作成しようとしています。私はフォトショップで次の画像を作成しました。ユーザーがフォームの各ステップで情報を入力し、最終的にステップ3でフォームを送信することを望んでいることはかなり自明です(次のステップに進むには、ページをリロードせずにシームレスにする必要があります) 。

ここに画像の説明を入力してください

誰かが私にこれについてどうやって行くべきかについていくつかの一般的な指針を教えてもらえますか?これはbackbone.jsを使用した私の最初のプロジェクトであり、この特定のウィジェットにアプローチするための最良の方法の概要を把握するのに非常に役立ちます。

ありがとう

4

2 に答える 2

14

私はそれを次のように構成します:

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/

于 2012-07-19T08:27:45.460 に答える
5

stusmithに加えて、バックボーンjsマルチステップフォームの例を作成しました。お気軽にご覧になり、コピーしてください。

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

于 2013-02-20T18:30:46.987 に答える