pushState with Rails ajax

Question

我有一个索引操作页面,显示了与Kaminari一起分页的项目列表,我已经为他们添加了ajax功能,现在我正在尝试通过使用pushState来获取适合的URL.

我的问题是当我的分页链接通过以下方式完成时,如何将URL传递给pushState方法:

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

和javascript视图如下:

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

我需要以某种方式获取URL作为我读过的pushstate的第三个参数传递？

更新:

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

$(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视图:

  $(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,但是当我在页面刷新测试时我的网格区域被替换为文本输出以下行儿子我的页面:

$('.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 将是历史记录中的链接。所以我们用该 url 触发另一个 ajax 请求$.get(document.location.href)。这与单击分页中的上一个具有相同的效果。