jQuery와 깊은 연결을 처리하는 올바른 방법 주소

Question

jQuery Address을 사용하여 AJAX 응용 프로그램과의 깊은 연결을 처리하고 있습니다. URL의 형식은 다음과 같습니다. example.com/#/section/item/param/param/param... URL의 다른 부분을 처리하기 위해 청취자가 .change() 인 것으로 설정했습니다. 따라서 /project/my-project/view-item/2/compose은 해당 프로젝트와 해당 항목 아래의 작성 상자를 열어 슬라이드합니다. 문제는 URL이 변경되면 해당 지점까지의 모든 작업이 호출된다는 것입니다. (URL이 단지 /project/my-project 일 때 일어나는 동작이 호출됩니다.)

"체인을 올라 가지 않고"원하는 동작 만 처리하는 가장 좋은 방법은 무엇입니까?

Answer 1

이벤트 변수는 속성을 사용하여 change 함수에 전달됩니다. 모니터링하려는 속성은 pathNames입니다.

var $current_path = window.location.hash; 
$.address.change(function(event) { 

    // get the difference in the two paths 
    $changed_path = event.path.replace(new RegExp('^'+$current_path,'i'), ''); 

    // make sure we update the current path 
    $current_path = event.path; 

    // how deep is the new path? 
    $level = event.pathNames.length; 

    // break the changed part into segments, ignoring leading/trailing slashes 
    $changed_path_array = $changed_path.replace(/^\/|\/$/g, '').split('/'); 

    // let's see what level actually changed from the current path 
    $changed_level = $level - $changed_path_array.length; 

}); 

그런 다음 사용하여 함수의 나머지 부분을 구성 할 수 있습니다 :

여기에 당신이뿐만 아니라 정확히 변경으로 얼마나 깊은 추적 할 수 있도록 할 수 내가 조립 한 일부 조각은 새로운 깊이는 세그먼트의 배열과 함께 정확히 무엇을 업데이트해야하는지 정확하게 나타냅니다. $ current_path를 기반으로 페이지의 새로운 페이지를로드하거나 페이지의 어딘가에 작은 변경 만 수행 할 수 있습니다.

Answer 2

"현재"URL/프로그램 상태를 추적하고 다음에 수행해야 할 작업을 알아 내기 위해 change()에있는 내용과 비교해야합니다.

Answer 3

PathJS과 같이 고급 클라이언트 측 라우팅을 위해 더 많은 것을 사용하는 것이 도움이 될 것 같습니다. 매우 사용하기 쉽고 다음과 같이 훨씬 간단하고 우아한 것을 할 수 있습니다.

// Define a route 
Path.map("#/project/my-project/view-item/:id/compose").to(function(){ 
    var id = this.params["id"]; //get your ID 
    $("#panel_" + id).show(); // Do something with the id. 
}); 

// Start listening for changes 
Path.listen():