以 DRY 方式预渲染 AJAX 填充的视图

Question

我们应用程序中的许多 Rails 视图通过 AJAX 填充它们自己，并且它们的数据的第一次呈现来自在 jquery 的 $(document.ready) 事件上运行的 javascript 调用。我们对此感兴趣的视图本质上显示了一个表格数据列表（例如收件箱、搜索结果列表等）。

我们希望在不进行 AJAX 调用的情况下预渲染结果的第一页，但我们希望能够在不重新加载整个页面的情况下重新填充视图。这并不难，但似乎需要在应用程序的不同部分编写单独的代码来执行相同的操作：一次在视图中绘制初始数据集（来自最初的render 调用），一次更多在 Javascript 中绘制新的数据集（动态清除旧的 DOM 并用新的 HTML 替换它）。

目前，javascript 会克隆一个隐藏的（带有style='display: none'）模板元素（通常是div），设置每个字段的值，并将新元素添加到 DOM。这很好用，但是如果我们想在渲染之前预先填充视图，我们必须在 ruby​​fied ERB 块中编写模板对象的另一个副本（例如@messages.each do |m|）。如果模板更改，则 ERB 块中的代码必须更改以匹配 -- not very DRY。

有没有更好的方法？如果有，是什么？

谢谢

汤姆

Answer 1

在您的文档（准备好）中，您可以明确地进行第一个不绑定到事件处理程序的 AJAX 调用。或者类似地，您可以显式触发事件处理程序。

未初始化的索引视图：

index.html.haml（初始）

.span12
  #book-table

现在这里是用于填充 div#book-table 的 DRYed 部分

_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