使用不显眼的 JavaScript 更新元素

Question

如您所知，当您从 Rails 2 升级到 3 时，您可以将以下内容替换

link_to_remote "more", :url => {...}

为

link_to "more", {...}, :remote => true

：但是如何处理 link_to_remote 中的 :update 选项？在 Railscast #205 中，Ryan Bates 演示了 link_to 和 :remote 和一个服务器响应，其中包含用于更新页面中特定元素的 JavaScript 代码，但这种做法对我来说似乎是错误的。我希望我的服务器的响应是一个简单的 HTML 片段，该片段易于测试并且可以由不同页面（客户端）以不同方式使用。我认为服务器不必知道请求页面上目标元素的 ID，因为它将操作与页面（迷你客户端）联系起来，因此使其不那么通用（它也感觉比纯 HTML 更难看）回复）。

那么，明确地说，有没有办法

link_to_remote "more", :url => {...}, :update => "products-list"

用 Rails 3 和 UJS 来做这样的事情？或者我是否必须编写 JavaScript 来捕获服务器的 HTML 响应并将其插入页面上的正确元素中？

如果是后者，请描述最佳方法（可以使用 link_to 的 :remote 选项吗？）。

Answer 1

是的，您可以使用 link_to :remote 应用后一种方法（编写自定义 JS 来获取服务器响应）。

你也可以选择获取json响应，然后使用JS更新页面上的数据。无论如何，请记住仅渲染部分页面，而不是整个页面。

编辑：

示例代码，这应该在单击 id“more”的内容时进行 AJAX 调用，然后更新页面中的 #product-list 元素：

 $("#more").click(function() {
 // make a POST call and replace the content
    $.post(, function(data) {
      $("#products-list").html(data);
    });
  });

您不需要更多代码，您可以编写一些帮助程序来生成此 JS ，而不是在视图中编写代码。顺便说一句，这还是 UJS

Answer 2

在 js 视图 /apps/views/product/index.js.erb 中可以编写 JS 代码，如以下

原型：

$("products-list").update("<%= escape_javascript(render(@products))%>");

jquery:

$("products-list").html("<%= escape_javascript(render(@products))%>");

or

$("products-list").append("<%= escape_javascript(render(@products))%>");

，请求成功时会执行

Answer 3

我不能 100% 确定这是 Rails 认可的方法，但我找到了一个可行且看起来相当干净的解决方案。假设我们有一个页面列出了数据库中十种最受欢迎​​的产品。最后是一个通过 AJAX 加载所有剩余产品的链接：

<ul id="products-list">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  ...
</ul>
<%= link_to "more...", "/products/all", :id => "load-more", :remote => true %>

服务器返回纯 HTML（以便该链接可以在许多不同的页面上使用，并且不绑定到特定的 DOM ID）。我们使用 Rails UJS 驱动程序触发的 ajax:x 事件（这里我使用 jQuery）来获取服务器的响应并将其插入到页面上的正确元素中：

<%= javascript_tag do %>
  $("#load-more").bind("ajax:complete", function(et, e){
    $("#products-list").html(e.responseText);
  });
<% end %>

如果需要，我们也可以使用 ajax:loading 事件显示“旋转器”：

<%= javascript_tag do %>
  $("load-more").bind("ajax:loading", function(et, e){
    $(this).hide();
    $("#products-spinner").show();
  });
<% end %>

Rails UJS 驱动程序还会触发其他四个事件：ajax:success、ajax:failure代码>、<代码>ajax:之前和<代码>ajax:之后。有关详细信息，请参阅应用程序中包含的驱动程序 (public/javascripts/rails.js)。