使用不引人注目的JavaScript更新元素

我不是百分之百确定这是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:x 由Rails 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)。

/apps/views/product/index.js.erb

原型:

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

jquery查询:

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

或

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

是的,您可以通过使用 .

您还可以选择获取json响应,然后使用JS更新页面上的数据。在任何情况下,请记住只呈现部分页面,而不是整个页面。

编辑:

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

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