Backbone.js 多步骤表单答案

【问题标题】：Backbone.js Multi-Step FormBackbone.js 多步骤表单
【发布时间】：2013-02-21 02:30:46
【问题描述】：

我希望在我的网站上为“即时报价”类型的东西制作一个分步表单。我在 Photoshop 上制作了以下图片，我希望用户在表单的每一步输入信息并最终在第 3 步提交表单（进入下一步应该是无缝的，无需重新加载页面） .

谁能给我一些一般性的指导，我应该如何去做？这是我使用backbone.js 的第一个项目，它确实有助于对处理这个特定小部件的最佳方法有一个高级概述。

谢谢

【问题讨论】：

出于好奇，您为这个项目选择 Backbone 的理由是什么？
现在只是为了练习和掌握它的工作原理，但本网站的未来版本将处理各种产品，并将有一个日历模块，客户可以在其中查看可用日期并安排约会，如果他们对报价感到满意。我猜骨干对于网站的这个特定部分来说是多余的。
@user1267778 这里的重点是您是否需要客户端重页进行注册？它可能涉及信用卡号码、电话号码等因此作为服务器端页面执行此操作，例如：aspx 页面、rails 表单。他们登录后，您将可以使用 js 重页。但是，如果您仍然想在这里尝试一下，我会这样做。 1.表格不应该代表模型吗？是的！那么很好 2. 这将是一个视图，其中有几个<div>，每个代表向导的一个步骤。在最后的<div> 上包含一个带有点击事件的提交按钮。 3.Click处理程序实例化mo
涉及信用卡信息的支付页面将是独立的，是服务器端。这只是联系报价的表格。我会试试你说的，谢谢。
这个要点可以帮助你：gist.github.com/1112194

【解决方案1】：

我的结构如下：

1.实现数据收集模型

拥有一个模型来收集各个阶段的数据。实现该模型的存储，并允许部分完成的数据。（您可能希望在每个阶段都存储它，以便用户可以在以后返回）。

2。实现通用的“多阶段”视图

这应该负责呈现顶部的选项卡/阶段，呈现向后/向前的导航元素，以及呈现子视图。

3.为每个阶段实现特定的子视图

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

4.实现路由

您可能希望每个子视图使用不同的 URL 路由，或者您可能希望整个多阶段流程使用相同的 URL。无论哪种方式，路由器都需要创建外部多阶段视图和内部子视图（或多个视图），并将它们与适当的模型连接在一起。

5.提示：使用 pub/sub

【讨论】：

【解决方案2】：

除了 stusmith，我只是做了一个主干 js 多步表单的例子。随意看看并复制它。

【讨论】：