Question

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

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

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

有更好的方法吗？如果是这样，它是什么？

由于

汤姆

Answer 1

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

未初始化的索引视图：

index.html.haml（初始）

.span12
  #book-table

现在这里是用于填充div#book-table

的DRYed up部分

_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

以干燥的方式预呈现AJAX填充的视图

1 个答案: