1

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

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

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

有没有更好的办法？如果是这样，它是什么？

谢谢

汤姆

4

1 回答 1

1

在您的文档（准备好）中，您可以明确地进行第一个不绑定到事件处理程序的 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-12T18:10:58.243 回答