JQuery＆history.js后退按鈕不起作用

Question

我正在使用history.JS（最新）與Jquery（最新）加載和替換網站的一部分，這一切都在工作，目前我只是想讓它在現代瀏覽器中工作，所以我不是在擺弄哈希變化。

一切似乎都有效，但是當我點擊瀏覽器上的后退按鈕（最新的FF和Chrome）時，頁面不會改變（盡管網址和標題確實有所改變）。 我有一個谷歌，看看這里，但我看不到發生了什么。

查看堆棧溢出我找到了這個頁面： 單擊帶有History.js的后退按鈕時恢復內容似乎問了類似的問題。 我已經將#left_col（這是被替換的div）的加載內容添加到狀態數據中，但我不確定從那里開始，我知道我需要在狀態發生變化時重新加載該數據，但我看不出怎么樣。

var History = window.History; 
var origTitle = document.title;
if ( !History.enabled ) {
    return false;
}

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState();     
    History.log(State.data, State.title, State.url);
});

$('.ajaxload').live("click", function() {
    History.pushState({state:1,leftcol:$('#left_col').html()}, origTitle, $(this).attr("href"));
    $('#left_col').load($(this).attr("rel"));
    return false;
});

我真的很感激任何幫助！

更新：

我設法讓用戶點擊返回更改頁面，但它沒有加載正確的狀態（它似乎返回兩個狀態而不是一個），我在上面的代碼中添加的代碼是：

window.addEventListener('popstate', function(event) {
    var State = History.getState(); 
    $('#left_col').html(State.data.leftcol);
});

Answer 1

事實證明我需要使用History.js更新statechange上的頁面，而不是像我想的那樣更新poState。 以下是我可能遇到同樣問題的完整（和正常工作）代碼：

    var History = window.History;
    var origTitle = document.title;

    if ( !History.enabled ) { return false; }
    History.pushState({state:$(this).attr('data-state'),leftcol:$('#left_col').html()}, origTitle, $(this).attr("href"));           // save initial state to browser history

    function updateContent(data) {
        if(data == null) return;                    // check if null (can be triggered by Chrome on page load)
        $('#left_col').html(data);              // replace left col with new (or old from history) data
        History.pushState({state:$(this).attr('data-state'),leftcol:$('#left_col').html()}, origTitle, $(this).attr("href"));           // save this state to browser history
    }

    History.Adapter.bind(window,'statechange',function(){           // use this NOT popstate (history.JS)
        var State = History.getState();
        //History.log(State.data, State.title, State.url);
        updateContent(State.data.leftcol);                                          // call update content with data for left col from saved state
    });

    $('.ajaxload').live("click", function() {                                   // attach click event, get html and send it to updateContent
        $.get($(this).attr("rel"), updateContent);
        return false;
    });

Answer 2

當你說你需要在狀態改變時重新加載數據時，你是正確的，因為你必須讓javascript撤消所做的更改或者從原始狀態再次渲染內容。

這可能更適合您的議程： https ： //github.com/thorsteinsson/jquery-routes

編輯：

您也可以考慮使用backbone.js（http://backbonejs.org/），因為它將幫助您以更容易理解需要完成的方式創建結構和抽象代碼。

Backbone帶有它自己的url路由器和所謂的視圖。