ruby-on-rails - 带有Rails ajax的pushState

Question

我有一个索引操作页面，显示了用 Kaminari 分页的项目列表，我已经向它们添加了 ajax 功能，现在正在尝试使用 PushState 来获取适合的 URL。

我的问题是，当我的分页链接通过以下方式完成时，如何获取要传递给 PushState 方法的 URL:

<%= paginate @coasters, remote: true %>

javascript View 如下:

$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');

我需要以某种方式从我读到的内容中获取要作为 Pushstate 的第三个参数传递的 URL？

更新:

我已将其更改为以下内容:

$(document).ready(function() {

  $(document).on('click', '.pagination a[data-remote=true]', function(e) {
    history.pushState({}, '', $(this).attr('href'));
  });

  $(window).on('popstate', function () {
    $('.grid').html('<%= escape_javascript render(@coasters) %>');
    $('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');
  });

});

$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');

所以我认为我的代码现在通过捕获分页远程真实链接上的点击绕过了 Rails jQuery UJS，并且 URL 可以正常工作。

URL 似乎有时会更新。后退按钮也失效了。

有什么想法我哪里出错了吗？

更新2:

我将大部分 javascript 移至我的主页 javascript 而不是 javascript View :

  $(document).on('click', '.pagination a[data-remote=true]', function(e) {
    history.pushState(null, '', $(this).attr('href'));
  });

  $(window).on('popstate', function () {
    console.log('popState started');
    $('.grid').html('<%= escape_javascript render(@coasters) %>');
    $('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');
  });

删除 popstate 内容后，单击链接时，上面的代码会完美更新 URL，但是当我将 popState 内容添加回 postate 时，一旦我刷新页面进行测试，就会调用它，并且我的网格区域会被替换为我的页面上以下行的文本输出:

$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s)

如何让 popstate 正常工作？

Answer 1

我也遇到过类似的情况，我是这样解决的。我不确定这是否适用于 Kaminari，因为我不知道 kaminari 是如何工作的。

#index.html.erb
<div class="grid">
  <%= render(@coasters) %>
</div>
<div class="pagination">
  <%= paginate @coasters, remote: true %>
</div>

--

#index.js.erb
$('.grid').html('<%= escape_javascript render(@coasters) %>');
$('.pagination').html('<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>');

在分页时，由于启用了 data-remote，它们将仅渲染 index.js.erb。

在我的 JavaScript 中

  $(document).on('click', '.pagination a[data-remote=true]', function(e) {
    history.pushState({}, '', $(this).attr('href'));
  });

  $(window).on('popstate', function () {
    $.get(document.location.href)
  });

点击分页链接时，data-remote 将处理 ajax 请求并渲染 index.js.erb

但是单击浏览器的后退按钮时，popstate 事件将被触发，浏览器中的当前 URL 将是来自历史记录的链接。因此，我们使用 $.get(document.location.href) 触发另一个带有该 url 的 ajax 请求。这与单击分页中的上一个具有相同的效果。