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的第三个参数？

UPDATE：

我把它改成如下：

$(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) %>'); 

所以我觉得我的代码现在通过拍摄的分页远程真正的链接点击绕过轨道的jQuery UJS自己和网址有点工作。

似乎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东西去掉上述codeupdates的URL完美的链接时被点击，但当我添加popState东西回邮局被称为一旦我做一个页面刷新测试和我的网格区域被替换为以下行文本输出的儿子我的页面：

$('.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) 
    }); 

在点击分页链接，数据远程将处理Ajax请求，并呈现index.js.erb

但在点击浏览器的popstate事件的后退按钮将被触发，浏览器中的当前网址将从历史记录链接到。所以我们用$.get(document.location.href)这个网址发起了另一个Ajax请求。这与点击前一页的效果相同。