Rails：使用 ajax 渲染列表

Posted 2023-05-09

【中文标题】Rails：使用 ajax 渲染列表

【英文标题】：Rails: render list with ajax

【发布时间】：2018-01-19 18:34:59

【问题描述】：

我有一个链接到details action 的按钮以显示特定reporting_date 的记录列表：

<%= link_to "DETAILS", opportunity_details_path(:reporting_date => date), class: "btn small-bright-button hidden-xs" %>

但是，我现在要做的是使用 ajax 在部分按钮下方呈现该列表，而不是重新加载整个页面并转到机会详细信息视图。

我想我的按钮应该包含remote: true:

<%= link_to "DETAILS", opportunity_details_path(:reporting_date => date), class: "btn small-bright-button hidden-xs", remote: true %>

那是我现在被困住了。

我该如何继续？

【参考方案1】：

通过 ajax 逐步加载内容（而不是一次加载所有内容）非常适合减少初始加载时间并加快应用程序的性能。因此，为试一试而感到自豪。您可以执行以下操作：

假设_details.html.erb里面的信息被包裹在一个名为.deails-wrapper的div中，这样就变成了

_details.html.erb（或任何页面名称）

<div class="details-wrapper">
   <p> Some details about this Opportunity </p>
</div>

删除：

<div class="details-wrapper">

<div> <!-- or whatever element is the greatest parent -->

只保留_details.html.erb中的实际信息

<p> Some details about this Opportunity </p>

然后你要做的就是把最外层的元素放在你的按钮下面：

<%= link_to "DETAILS", opportunity_details_path(:reporting_date => date), class: "btn small-bright-button hidden-xs" %>

你希望信息出现在哪里，这样它就变成了

<%= link_to "DETAILS", opportunity_details_path(:reporting_date => date), class: "btn small-bright-button hidden-xs" %>

<div class="details-wrapper"><div> <!-- Just an empty div for now -->

（别忘了在按钮上加上remote: true）

在控制器内部添加渲染:opportunity_details:

def opportunity_details
render :opportunity_details
end

现在在与_details.html.erb（或其他名称）相同的文件夹中创建一个与控制器操作同名的文件，但不是html.erb，而是js.erb 文件。每次有人单击该按钮时，都会执行此 .js.erb 中的所有 js 代码。 file 你还记得我们放在按钮下的空元素吗？它将作为我们的渲染点。

opportunity_details.js.erb

$('.details-wrapper').html("<%= escape_javascript(render :partial =>'path_to/details.html.erb') %>");

基本上就是这样。由于您的模型未设置为接受 js 请求，您可能会遇到一些错误。但总而言之，你很高兴！