Backbone.js的多步表单 [英] Backbone.js Multi-Step Form

问题描述

我期待作出在我的网站的即时报价类型的东西一步步的形式。我做的Photoshop下面的图片，这是pretty不言自明的，我希望用户在表单中的每一步输入信息，并最终提交表单在第3步（要到下一个步骤应该是无缝的，没有一个页面重载）。

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 the user to enter information at each step of the form and ultimately submit the form at step 3 (going to the next step should be seamless, without a page reload).

有人请给我一些一般指示，我应该怎么去呢？这是使用Backbone.js的我的第一个项目，这将真正帮助到有最新最好的方式来处理这个特殊的小部件高度概括。

Can someone please give me some general pointers how I should go about this? This is my first project using backbone.js and it would really help to have a high level overview of whats the best way to approach this particular widget.

感谢

推荐答案

我想如下结构的：

1。实施模型被收集的数据

有它收集整个阶段中的数据的单一模式。实行这种模式的存储，并允许部分完成的数据。 （您可能会想这个存储在每个阶段，以便用户可以在日后回来）。

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。实现一个通用的多级观

这应该是负责呈现标签/阶段顶部，使导航元素向后/向前，并呈现子视图。

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。落实每个阶段的具体子视图

这些应该对上述模型的位进行操作。

These should operate on bits of the above model.

4。实现路由

您可能需要为每个子视图不同的URL路径，或者你可能要为整个多阶段过程相同的URL。无论哪种方式，路由器需要与合适的模型制作外多级视图和内子视图（或意见），并把它们连接在一起，在一起。

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。提示：利用发布/订阅的

不要夫妇的意见紧密。使用某种形式的发布/订阅的提高，并听取自定义事件。 （例如：<一href=\"http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/\">http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/)

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/)

这篇关于Backbone.js的多步表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！