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請求。這與點擊前一頁的效果相同。