AJAX 레코드 컨텍스트에 양방향으로 location.hash 바인딩 구현

Question

레코드 검색 및 선택을 허용하는 간단한 javascript AJAX 응용 프로그램이 있습니다. Selection은 location.hash를 업데이트하고 연관된 레코드 세부 정보를로드하며 이상적으로는 해시가 변경 될 때 레코드를로드합니다. 물론 부주의 한 구현으로 인해 루프 및 추가 패널 플래시가 발생할 수 있습니다.

이 양방향 바인딩의 예측 가능하고 간결한 구현이 필요합니다.

한 가지 방법은 hashchange 이벤트에만 레코드를로드하는 것이며 UI에서 레코드를 선택하면 location.hash을 설정하십시오. 이것은 가장 간결 해 보입니다 만, 이것은 구식 브라우저에서 기록 된 클릭 응답 성을 감소시킬 것이라는 점에 걱정됩니다. hashchange shim.

또 다른 접근법은 레코드를 선택할 때 navigating (예 :) 상태를 기록하고 hashchange을 처리 할 때이를 지우는 것입니다. 그 내용은 this question입니다. 그러나 Back을 여러 번 빠르게 탭하는 것과 같은 특정 이벤트 시퀀스가 ​​표시되는 콘텐츠와 URL이 일치하지 않을 수 있습니다.

이러한 문제를 해결하는 구현을 보았습니까?

Answer 1

내 경우에는 읽기 전용/멱등원 조작 (글쎄, 실제로는 로그를 기록)이기 때문에 간단한 답이 있다고 생각합니다.

현재 콘텐츠가 표시하는 상태를 저장하고 콘텐츠가로드되는 각 이벤트 ('redundant'hashchange 이벤트 포함)에 대해 테스트하고 현재 표시된 상태와 일치하는 이벤트는 무시합니다.

좋거나 나쁘게 보입니다. :)

여기 내 대략적인/의사 코드입니다 :

var activeRecordId; 
function loadHash() { 
    var idList = window.location.hash.substring(1).split(','); 
    if (idList.length > 1) loadSpecificRecordsToList(idList); 
    else if (idList != '') loadDetailRecord(idList[0]); 
} 
function loadDetailRecord(id) { 
    if (id != activeRecordId) { 
     activeRecordId = id; 
     doDetailLoadAjaxAndSuch(id); 
    } 
} 
$(function() { 
    loadHash(); 
    $.bind('hashchange', loadHash); 
}); 

Answer 2

왜 대신 HTML5 history API를 사용하는? 모든 최신 브라우저 지원이

당신이

History.Adapter.bind(window, 'statechange', function() { 
    // event handler code here 
    var state = History.getState(); 
} 

또는 역사에 새로운 URL을 밀어 당신이 URL 업데이트에 가입 할 수있는 라이브러리를 사용하여 역사/국가 API를

작업을 history.js library을 사용할 수 있습니다 일을 더 쉽게 만들려면

History.pushState(null, "name", "http://newurl"); 

난 당신이 양방향 바인딩을 얻기 위해 사용하고자하는 JS 프레임 워크 모르겠지만, KnockoutJS 당신은 CRE 수 있습니다 읽기 및 쓰기 방법으로 ko.computed 개체를 먹었습니다