Khôi phục nội dung khi nhấp vào nút quay lại với History.js

Question

Tôi đã triển khai History.js trên một ứng dụng thử nghiệm cục bộ. Mọi thứ dường như hoạt động, tuy nhiên nếu tôi nhấn nút quay lại trong trình duyệt, nội dung trước đó sẽ không được khôi phục.

Tôi có thực sự phải tải nội dung theo cách thủ công một lần nữa (ví dụ: thực hiện cuộc gọi ajax khác) khi người dùng nhấn nút quay lại không? Sau đó, làm thế nào để github làm điều đó? Tôi thấy họ không thực hiện cuộc gọi ajax khác khi nhấp vào nút quay lại trong cây mã.

Đây là mã của tôi:

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


    $('a').each(function(index, link) { 

    if ($(link).attr('data-ajax-disabled') != 'true') { 

     $(link).click(function(event) 
     { 

     var clips = $(this).attr('data-ajax-clips') || ''; 

     $.ajax($(this).attr('href'), 
     { 
      data: {_clips:clips}, 
      success: function(data) 
      { 

       var data = $.parseJSON(data); 


       History.pushState({state:1}, data.title || document.title, 'http://127.0.0.1/site/www/'); 


       $.each(data.clips, function(key, val) 
       { 
        $(key).replaceWith(val); 
       }); 

      } 
     }); 

     return false; 

     }); 
    } 
    }); 

data.clips là một mảng json chứa id của đối tượng html như chìa khóa và nội dung html thực tế như giá trị. Ví dụ

'# header' => 'nội dung trong tiêu đề div'

Như đã đề cập, việc thay đổi hoạt động tốt. Tôi xuất một số ngẫu nhiên trong tiêu đề. Mỗi lần nhấp vào một liên kết sẽ phát ra một số ngẫu nhiên khác trong tiêu đề. Tuy nhiên, nếu tôi nhấn nút quay lại số vẫn giữ nguyên, chỉ tiêu đề sẽ được khôi phục (cũng là số ngẫu nhiên).

Answer 1

Ok tôi hiểu rồi, cũng nhờ Tobias Cohen cho gợi ý.

Người ta phải lưu trữ dữ liệu đã tải trong đối tượng lịch sử (State.data). Trước tiên, hãy xem cách gọi lại statechange đã thay đổi:

History.Adapter.bind(window, 'statechange', function() 
{ 

    var State = History.getState(); 

    $.each(State.data.clips, function(key, val) 
    { 
     $(key).replaceWith(val); 
    }); 

    History.log(State.data, State.title, State.url); 

}); 

Như bạn thấy, trên mỗi statechange tôi có thể truy cập State.data.clips và thay thế nội dung html.

LƯU Ý: Một statechange cũng xảy ra khi gọi History.pushState(). Điều đó có nghĩa là trong câu hỏi ban đầu của tôi đoạn mã thứ hai là sai trong thực tế là tôi làm thao tác nội dung trong đó. Không cần thiết. Chỉ cần gọi History.pushState() và thực hiện bất kỳ thao tác nội dung nào trong callback statechange.

Vì vậy, cho đầy đủ, đây là cách tôi đẩy clip vào đối tượng lịch sử:

History.pushState({state:1, clips:data.clips}, data.title || document.title, 'http://127.0.0.1/site/www/');