以幹線方式預渲染AJAX填充視圖

我們的應用程序中的許多Rails視圖通過AJAX填充自己，並且它們的數據的第一個渲染來自在jquery的$(document.ready)事件上運行的JavaScript調用。我們感興趣的視圖基本上顯示了表格數據的列表（例如收件箱，搜索結果列表等）。以幹線方式預渲染AJAX填充視圖

我們希望預渲染結果的第一頁而不必進行AJAX調用，但我們希望能夠在不重新加載整個頁面的情況下重新填充視圖。這並不困難，但它似乎需要在應用程序的不同部分編寫單獨的代碼片段來執行相同的操作：一次在視圖中繪製初始數據集（從最初的render調用開始），再一次在Javascript來繪製新的數據集（動態清除舊的DOM並用新的HTML替換它）。

當前JavaScript克隆一個隱藏的模板元素（通常爲div），設置每個字段的值並將新元素添加到DOM。這很好，但如果我們想在渲染前預先填充視圖，我們必須在rubyfied ERB塊中寫入模板對象的另一個副本（例如@messages.each do |m|）。如果模板已更改，則必須更改ERB塊中的代碼以匹配-不是非常乾的。

有沒有更好的方法？如果是這樣，那是什麼？

感謝

湯姆

來源

2012-05-12 Tom Corelis

在您的文檔（準備好），你可以明確地做出第一AJAX調用不依賴於事件處理程序。或者類似地，你可以明確地觸發事件處理程序。

未初始化索引視圖：

index.html.haml（初始）

.span12 
    #book-table

現在這裏是DRYed向上部分將被用於填充div#book-table

_table.html.haml

%table 
    %tr 
    %th Title 
    %th Author 
    - books.each do |book| 
    %tr 
     %td= link_to book.title, book_path(book) 
     %td= book.author

接下來，你將有JS響應它。請注意，這樣做是在AJAX調用索引操作期間呈現部分內容。

index.js.erb的

$('#book-table').html('<%= escape_javascript(render(partial: "table", locals: { books: @books })) %>');

我們現在需要調整索引視圖來初始化這個觀點：

index.html.haml（最終）

:javascript 
    $(document).ready (function() { 
    $.get("/books.js"); 
    }); 

.span12 
    #book-table

由於你可以看到，document.ready執行了一個初始的AJAX調用，擊中了你的.js.erb並填充了div，而沒有明確地填充.html.haml中的div

來源

2012-05-12 18:10:58 Ron

我很抱歉，但那不是我的問題。我正在尋找答案，導致最初的請求返回HTML與預先填充的數據，使用相同的模板，使用JavaScript。 –

然後，共享部分，即初始請求和AJAX調用都使用。 '$（'＃mydiv'）。html（'<％= escape_javascript（render：mypartial，locals：{foo：@myvar}）％>'）;' 您的初始調用可以將局部視圖渲染爲視圖的一部分，然後您的AJAX調用可以渲染像上面的.js.erb一樣更新它。 – Ron

發佈作爲答案，我會將其標記爲:-) –

以幹線方式預渲染AJAX填充視圖

回答

相關問題