如何用JQuery和Rails創建一個類似Wufoo的（表單生成器）Web應用程序？

我正在尋找一些關於如何在客戶端使用JQuery在Rails 3應用程序中實現Wufoo-like builder的指導。基本上允許用戶在「離線」模式下創建一些內容（對於Wufoo來說是一種形式），然後通過單擊保存按鈕或類似的方法將所有用戶編輯保存到服務器中（例如可以是自動保存瀏覽器每30秒左右）。如何用JQuery和Rails創建一個類似Wufoo的（表單生成器）Web應用程序？

我傾向於在這一點上使用HTML5本地存儲。「構建器」本質上將用戶編輯本地存儲在JSON格式的瀏覽器本地存儲中。點擊保存按鈕，然後HTTP將本地存儲的內容再次以JSON格式發送到Rails應用程序。這聽起來是對的嗎？任何建議，建議？

一些額外的考慮/問題：

有關不支持HTML5的舊的瀏覽器是什麼？是否應該有一個使用cookie存儲的後備計劃？
任何JQuery插件，可以幫助一些這？例如抽象的HTML5本地存儲作爲主存儲和cookie存儲作爲輔助/備用存儲。
要注意哪些Rails特定的注意事項？

注意：以下問題專門解決所見即所得的表單生成器，並沒有真正提供任何好的解決方案。 Creating WYSIWYG form builder (á la Wufoo) in Rails

謝謝！

來源

2011-01-20 mbreining

我有一種感覺，你的問題 - 雖然有趣 - 但是有點太模糊了。如果你能夠把它分成更小的部分，更詳細地展示你在哪裏以及你在哪裏撞牆，人們可能會更好地幫助你。祝你好運！ – polarblau 2011-01-22 17:31:02

謝謝。我發佈了一個答案，以更新我的進度。 – mbreining 2011-01-23 01:25:51

我一直在玩這個有點工作，我認爲它可以給你一個jquery窗體生成器，知道如何序列化和反序列化本身的開端。我認爲它將表單序列化爲字符串而不是JSON，但這是一個開始。 http://www.botsko.net/blog/2009/04/07/jquery-form-builder-plugin/

谷歌搜索找到了我sites.google.com/site/daveschindler/jquery-html5-storage-plugin它說，它存儲在HTML 5的存儲事情回退到餅乾如果瀏覽器不支持它。

另一個想法：如果使用本地存儲的目標是讓用戶不會失去他們還不想發佈的工作，另一個選擇可能是實現單獨的「保存」和「發佈」按鈕，這樣您仍然可以保存用戶在服務器端的工作，但讓他們保留「草稿」直到他們準備發佈，這樣，他們使用的瀏覽器或PC就無所謂了。

希望這會有所幫助。

來源

2011-01-22 22:30:12 lee

謝謝。我使用JSON，所以XML序列化/反序列化代碼不會有太大的幫助。儘管我很喜歡這個建造者本身。將重新使用它的一部分。 – mbreining 2011-01-23 01:29:58

這是我最終實現的設計。我還沒有一個完整的解決方案，但我認爲這是一個好的開始。

數據模型

在我的情況下，用戶需要能夠建立，任務可以有不同的類型，因此屬性的任務列表。任務也可以嵌入其他對象。儘管我正在處理更深層次的嵌套對象，但與某種意義上的表單構建器類似。這裏的關鍵是確保您的後端應用程序僅公開與您的應用程序域相關的對象（在Domain Driven Design的意義上），以便您的客戶端代碼在從服務器調用中反序列化數據後不重複數據並在序列化之前準備保存。就此而言，我必須對服務器端表示層進行一些更改，但結果我認爲我的客戶端代碼更清晰，更專注於處理實際的用戶事件。

數據序列

我選擇JSON作爲數據交換格式。在客戶端，我有兩個處理數據序列化和反序列化的函數。該實現非常簡單（部分歸功於我公開的域模型對象的一些更改）。我在下面粘貼了一個簡化版本。唯一的挑戰是Rails用來處理PUT請求的_method參數似乎不適用於JSON Content-Type。見Using HTTP PUT to send JSON with Jquery and Rails 3

var todoList = {}; 

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

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

function saveTodoList() { 
    $.ajax({ 
    type: 'POST', 
    url: "https://stackoverflow.com/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"); 
    } 
    }); 
}

在服務器端，滑軌可以很容易地處理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 Template生成HTML。構建器的主要功能是動態生成HTML，因此該插件非常方便。我爲我的待辦事項列表模型（例如任務，筆記...）的所有構建塊定義了模板。每當這些對象的新實例被創建並且需要被渲染時，模板都會被調用。

我認爲這奠定了大部分的基礎。剩下的大部分是鐵桿Javascript來處理所有與表單/ todoList構建器的用戶交互。

來源

2011-01-23 01:24:47 mbreining

如何用JQuery和Rails創建一個類似Wufoo的（表單生成器）Web應用程序？

回答

相關問題