Javascript 如何使用JQuery和Rails创建类似Wufoo（FormBuilder）的web应用程序？

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

目前我倾向于使用HTML5本地存储。“构建器”基本上将用户编辑以JSON格式本地存储在浏览器本地存储中。单击Save按钮，然后将本地存储的内容以JSON格式HTTP发布到Rails应用程序。这听起来对吗？有什么建议吗

其他一些考虑/问题：

• 那些不支持HTML5的旧浏览器呢？是否应该有一个使用cookie存储的回退计划
• 有没有JQuery插件可以帮上一些忙？e、 g.将HTML5本地存储抽象为主存储，将cookie存储抽象为辅助/后备存储
• 需要注意的Rails特定注意事项有哪些

注意：以下问题专门针对WYSIWYG form builder，并没有提供任何好的解决方案。

---

谢谢

我在工作中一直在研究这个问题，我认为它可以让您在知道如何序列化和反序列化自己的jquery表单生成器上领先一步。我认为它将表单序列化为字符串而不是JSON，但这只是一个开始

谷歌搜索找到了我的sites.google.com/site/daveschindler/jquery-html5-storage-plugin，它说如果浏览器不支持，它会将东西存储在html5存储中，并返回cookies

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

---

希望这能有所帮助。

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

数据模型

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

数据序列化

我选择JSON作为数据交换格式。在客户端，我有两个函数来处理数据序列化和反序列化。实现非常简单（部分是由于我对公开域模型对象所做的一些更改）。我在下面粘贴了一个简化版本。唯一的挑战是Rails用来处理PUT请求的_method参数似乎不适用于JSON内容类型。看

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

客户端持久性

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

动态HTML生成

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

---

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

我感觉您的问题（虽然很有趣）的表述有点模糊。如果你能把它分成更小的部分，更详细地展示你在哪里，你撞到了哪里，人们可能会更好地帮助你。祝你好运谢谢我发布了一个答案来更新我的进度。谢谢。我使用的是JSON，所以XML序列化/反序列化代码不会有多大帮助。不过我很喜欢建筑商本身。将重复使用其中的一部分。+1-这个答案真的很有帮助。我们有同样的要求。我能从中得到一个很好的概述。但我想知道数据库结构的外观。你能帮我一下吗。你能发布数据库模式吗。这真的很有帮助。

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");
    }
  });
}

  # 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