使用Javascript框架重构一个巨大的表单

Question

我有一个巨大的形式分为几个部分。它有大约八个部分，将这个巨型表单放在一个页面上简直是不实用的。没有人会勉强度过难关 我还决定将它分成页面也不是理想的，因为如果某人是第6部分并意识到他需要在第2部分改变某些内容。

我使用Jquery创建了一个客户端解决方案。因此，您只需单击表示表单各部分的选项卡。因此，当您单击新部分并处理保存服务器端的所有逻辑时，您隐藏上一部分部分，确保有人可以在验证每个部分的数据时来回切换。在幕后它仍然是一个巨大的形式。很多Jquery用于使其正常工作。它与DOM紧密耦合，除非我解释，否则没有人能理解代码。

此外，在进行更改时，您必须确保没有导致意外情况的延迟事件影响代码的其他部分。

它迅速成为一个怪物。我认为这是Javascript框架解决的理想问题，但我不知道从哪里开始。它将如何适应Javascript MVC的上下文，尤其是我使用的所有DOM操作和事件驱动方法。欢迎任何想法或建议。

Answer 1

处理数据绑定和嵌入式控制语句的框架听起来像是这样的问题的理想选择，例如Knockout.js或Angular.js。

例如，对于淘汰赛，你可以有一个像：

这样的片段

<div data-bind="if: someCondition">
    Only show this section of the form if the condition is met
    ....
</div>

Answer 2

我会考虑使用AngularJS

这是一个真实的战争故事 - 我正在努力解决你所遇到的同样问题。巨大的笨拙形式，需要将其重构为可重复使用的组件（因为表单的一部分包括定价页面）。

入门非常简单，我建议您在看到我的解决方案之前先查看教程。

以下是我解决问题的方法 -

1. 为您的表单设置一个控制器。
2. 使用UI-router制作表单的子路线（例如/signup/profile，/signup/address等）;所有这些都由你的主控制器控制。将它们存储在单独的HTML文件中，作为在视图上呈现的模板（yay！）

此外，您不需要使用角度的主要承诺，您可以在您的应用程序中将其用于此目的。

希望这有帮助。