History.js에서 뒤로 버튼을 클릭 할 때 콘텐츠 복원

Question

로컬 테스트 응용 프로그램에서 History.js를 구현했습니다. 모든 것이 작동하는 것처럼 보이지만 브라우저에서 뒤로 버튼을 누르면 이전 내용이 복원되지 않습니다.

사용자가 뒤로 버튼을 누르면 내용을 수동으로 다시로드해야합니까 (즉, 다른 아약스 호출을해야하나요?). 그렇다면 github은 어떻게합니까? 코드 트리에서 뒤로 버튼을 클릭 할 때 다른 아약스 호출을하지 않는 것을 볼 수 있습니다.

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 키와 값으로 실제 HTML 콘텐츠로 HTML 객체의 아이디의 포함 된 JSON 배열입니다 :

여기 내 코드입니다. 예

'는 #header'=> '헤더 DIV 콘텐츠'바와 같이

들어, 여분 잘 작동한다. 헤더에 난수를 출력합니다. 링크를 클릭 할 때마다 헤더의 다른 임의의 숫자가 누출됩니다. 그러나 뒤로 버튼을 누르면 숫자가 그대로 유지되고 제목 만 복원됩니다 (임의의 숫자도 가능).

Answer 1

나는 힌트를 얻기 위해 Tobias Cohen에게도 감사의 말을 전한다.

로드 된 데이터를 기록 개체 (State.data)에 저장해야합니다. 첫 번째의이 stateChange 오브젝트 콜백을 변경하는 방법을 보자 : 당신이 볼 수 있듯이

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); 

}); 

, 각 stateChange 오브젝트에 나는 State.data.clips에 액세스하고 HTML 콘텐츠를 대체 할 수 있습니다.

참고 : 상태 변경은 History.pushState()를 호출 할 때도 발생합니다. 즉, 내 첫 질문에서 두 번째 코드 스 니펫은 콘텐츠 조작을 수행한다는 점에서 잘못되었습니다. 그럴 필요가 없습니다. History.pushState()를 호출하고 statechange 콜백 내에서 내용을 조작하면됩니다. 브라우저 히스토리 기능을 무시할 경우

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