如何使用 JQuery 和 Rails 创建类似 Wufoo（表单生成器）的 Web 应用程序？

Question

我正在寻找一些有关如何使用 JQuery 在 Rails 3 应用程序中实现 类似 Wufoo 的构建器 的指导在客户端。基本上允许用户在“离线”模式下构建某些内容（Wufoo 中的表单），然后通过单击“保存”按钮或类似按钮将所有用户编辑批量保存到服务器（例如，可以是由每 30 秒左右浏览一次）。

目前我倾向于使用 HTML5 本地存储。 “构建器”本质上将以 JSON 格式将用户编辑本地存储在浏览器本地存储中。单击“保存”按钮会将本地存储的内容通过 HTTP 发布到 Rails 应用程序，同样以 JSON 格式。这听起来正确吗？有什么意见、建议吗？

一些额外的注意事项/问题：

• 不支持 HTML5 的旧版浏览器怎么办？是否应该有一个使用 cookie 存储的后备计划？
• 有什么 JQuery 插件可以帮助解决这个问题吗？例如，将 HTML5 本地存储抽象为主要存储，将 cookie 存储抽象为辅助/后备存储。
• 有哪些特定于 Rails 需要注意的注意事项？

注意：以下问题专门针对所见即所得表单生成器，并没有真正提供任何好的解决方案。 在 Rails 中创建 WYSIWYG 表单构建器（á la Wufoo）

谢谢！

Answer 1

我在工作中对此进行了一些尝试，我认为它可以让您在知道如何序列化和反序列化自身的 jquery 表单构建器上取得领先。我认为它将表单序列化为字符串而不是 JSON，但这是一个开始。 http://www.botsko.net/blog/ 2009/04/07/jquery-form-b​​uilder-plugin/

谷歌搜索找到了我sites.google.com/site/daveschindler/jquery-html5-storage-plugin，它说它将东西存储在HTML 5存储中如果浏览器不支持，则使用 cookie。

另一个想法：如果使用本地存储的目标是让用户不丢失他们还不想发布的工作，另一个选择可能是实现单独的“保存”和“发布”按钮，这样您仍然可以保存用户的工作服务器端，但让他们保留“草稿”直到他们准备好发布为止，这样他们使用哪种浏览器或PC就无关紧要了。

希望这有帮助。

Answer 2

这是我最终实现的设计。我距离完整的解决方案还很远，但我认为这是一个好的开始。

数据模型

在我的例子中，用户需要能够构建一个任务列表，其中任务可以具有不同的类型和属性。任务还可以嵌入其他对象。在某种意义上类似于表单生成器，尽管我正在处理更深层次的嵌套对象。这里的关键是确保您的后端应用程序仅公开属于您的应用程序域的对象（在 域驱动设计），这样您的客户端代码就不会在从服务器调用反序列化数据之后以及在准备保存之前序列化数据之前花费时间重构数据。在某种程度上，我必须对服务器端表示层进行一些更改，但结果我认为我的客户端代码更干净，更专注于处理实际的用户事件。

数据序列化

我选择 JSON 作为数据交换格式。在客户端，我有两个处理数据序列化和反序列化的函数。实现非常简单（部分归功于我为公开域模型对象所做的一些更改）。我在下面粘贴了一个简化版本。唯一的挑战是 Rails 用于处理 PUT 请求的 _method 参数似乎不适用于 JSON Content-Type。请参阅 使用 HTTP PUT 通过 Jquery 发送 JSON 和Rails 3

var todoList = {};

$.getJSON("/users/123/todolists/456.json", function(data) {
  loadTodoList(data);
  ...
});

function loadTodoList(data) {
  todoList = data.todoList;
}

function saveTodoList() {
  $.ajax({
    type: 'POST',
    url: "/users/123/todolists/456",
    data: JSON.stringify({ todoList: todoList }),
    contentType: 'application/json',
    dataType: 'script', // could be "json", "html" too
    beforeSend: function(xhr){
      xhr.setRequestHeader("X-Http-Method-Override", "put");
    }
  });
}

在服务器端，Rails 也可以轻松处理 JSON（JSON 的序列化和反序列化由框架自动且透明地执行）。我只是重写了 TodoList 模型上的 to_json() 方法，以避免来回传递无用的数据（例如 create_at、modified_at 属性）。还必须确保在获取顶级对象（即 TodoList）时包含所有嵌套对象。

  # TodoListsController
  def show
    @todolist = TodoList.find_by_id(params[:id], :include => [:tasks, ...])
    respond_to do |format|
      format.json do
        render :json => @todolist.to_json
      end
    end
  end

  # TodoList model
  def to_json
    super(:only => :name,
          :include => { :tasks => { :only => [:name, :description, ...],
                                    :include => ... }})
  end

客户端持久性

这里的目标是避免意外丢失尚未保存的用户编辑。到目前为止，我直接使用 HTML5 本地存储（localStorage 变量），但最终会寻找一个 jQuery 插件，如果不支持 HTML5，它会自动处理回退到 cookie 存储。

动态 HTML 生成

我依靠 jQuery 模板 来生成HTML。构建器的主要功能是动态生成 HTML，因此这个插件非常方便。我已经为待办事项列表模型的所有构建块定义了模板（例如任务、注释……）。每当创建这些对象的新实例并需要呈现时，就会调用模板。

我认为这奠定了大部分基础。其余部分主要是核心 Javascript，用于处理与表单/todoList 构建器的所有用户交互。