Rails 中的 JQuery 分页导致渲染失败

Question

我正在使用 JQuery 在我的 rails 应用程序中实现分页，并且遇到了一个问题，当我在浏览器中回击时，rails 有时无法呈现页面内容，而是将原始 Javascript 转储到我的浏览器窗口中.以下是我正在使用的快速浏览：

分页.js：

if (history && history.pushState) {
  $(function () {
    $('.pagination a').live("click", function () {
      $.ajax({url: this.href, dataType: "script", cache: true});
      history.pushState(null, document.title, this.href);
      $("html, body").animate({ scrollTop: 0 }, 300);
      return false;
    });

    $(window).bind("popstate", function() {
      $.ajax({url: location.href, dataType: "script", cache: true});
    });
  });
}

在我看来，index.js.erb：

$("#products").html("<%= escape_javascript(render("products")) %>");

它有时会起作用，但通常在点击后退按钮时，JS 会被转储到我的浏览器窗口中，而不会被评估/渲染。它看起来像这样（在我的浏览器中）：

$("#products").html("<table class=\"table table-striped\">\n<thead>\n<tr>\n<th>Products

...等等。我不确定到底是什么失败了。有什么想法吗？

Answer 1

浏览器请求的路径如下所示

• /产品
• /products?page=1
• /products?page=2

根据 /products?page=2 是“手动”浏览还是通过 ajax 浏览，您呈现 js 版本或普通版本。当您点击后退按钮时，您可能会得到浏览器缓存中的内容，这可能是这两个版本中的任何一个，具体取决于您之前的导航历史记录。

为了使其正常工作，您希望浏览器维护两个独立版本的缓存。一种方法是在发出 ajax 请求时添加一个额外的参数：

$('.pagination a').live("click", function () {
  $.ajax({url: this.href, dataType: "script", cache: true, data: {'ajax_paginate': true});
  ...
});

jquery-pjax 已经这样做了，如果你使用 pjax-rails 插件，神奇的缓存分离参数将自动为你剥离。

在尝试之前，您需要清空浏览器缓存 - 您可能已经在缓存中获得了大量错误数据。