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

Pre-render AJAX-populated view in a DRY way

本文关键字：填充 视图 AJAX DRY 方式预      更新时间：2023-09-26

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

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

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

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

谢谢

汤姆

在文档(ready(中，可以显式进行第一个未绑定到事件处理程序的 AJAX 调用。 或者类似地，您可以显式触发事件处理程序。

未初始化的索引视图：

index.html.haml (初始(

.span12
  #book-table

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

_table.html.哈姆尔

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

接下来，您将拥有响应它的 JS。 请注意，这样做是在 AJAX 调用索引操作期间呈现部分。

索引.js.erb

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

我们现在需要调整索引视图以初始化为此视图：

索引.html.哈姆尔(最终(

:javascript
  $(document).ready (function() {
    $.get("/books.js");
  });
.span12
  #book-table

如您所见，document.ready 执行初始 AJAX 调用，点击 .js.erb 并填充div，而无需在 .html.haml 中显式填充div

。
相关文章：