2

如您所知，当您从 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's:remote选项吗？）。

4

3 回答 3

2

我不是 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）。我们使用ajax:xRails UJS 驱动程序（这里我使用 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:before和ajax:after。有关更多信息，请参阅您的应用程序 (public/javascripts/rails.js) 中包含的驱动程序。

于 2010-07-19T20:41:10.307 回答
1

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

原型：

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

jQuery：

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

或者

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

并在请求成功时执行

于 2010-06-29T18:45:47.653 回答
0

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

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

编辑：

一个示例代码，当单击 id 为“更多”的内容时应该会调用 AJAX，然后更新页面中的 #product-list 元素：

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

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

于 2010-07-02T13:04:46.030 回答