jsTree가 잘못된 상태로로드 됨

Question

jsTree는 각 페이지 리디렉션/재로드에서 트리의 상태를 저장해야하지만 일관되게 수행하지는 않습니다. 나무는 시간의 일부만 저장하는 것처럼 보입니다.

내 나무는 항상 같은 페이지의 왼쪽 탐색 메뉴로 볼 같습니다

| Category 1 
| 
| Category 2 
| ---Sub 2.1 
| 
| Category 3 
| --- Sub 3.1 
| --- Sub 3.2 
|  --- Sub 3.2.1 
|  --- Sub 3.2.2 

우리가 나는 종류 3.2.2을 선택한 가정 해 봅시다. 이렇게하면 사용자가 리디렉션되고 페이지로드시 선택한 카테고리가 올바르게 강조 표시됩니다.

카테고리 1을 클릭하면 사용자가 다시 리디렉션되고 페이지로드가 완료되면 카테고리 1이 선택됩니다. 이것은 발생하지 않습니다. 대신 사용자는이 페이지로 이동하지만 Sub 3.2.2는 선택된 것으로 표시됩니다.

카테고리 3을 클릭하면이 카테고리가 올바르게 강조 표시됩니다. 클릭 및 리디렉션시 다른 노드 집합이 선택되지 않습니다. 여기

트리 초기화 방법은 다음과 같습니다

$(function() { 
// Get categories from JSON server 
    $.getJSON('/getcategories', function(treedata) { 

      // Builds JSON data for the tree 
      var tree = menuRoot(treedata.categoryList); 

      $('#jsCategoryTree').jstree({ 
       'core' : {'multiple' : false, 'data' : tree}, 
       'state' : { 'key' : 'jsCategoryTree', 'events' : 'activate_node.jstree'}, 
       'plugins' : ['state','cookies','ui','html_data'], 
       'cookies' : { cookie_options : { path : '/' } } 
      }); 

      // Binds a link to each node to redirect user 
      $('#jsCategoryTree').on('activate_node.jstree', function(e, data) { 
       var categoryId = data.node.id; 
       location.href = '/?categoryId=' + categoryId; 
      });  
     }); 
}) 

내가 기본 이벤트뿐만 아니라와의 다양한 조합으로 초기화하는 것을 시도했다 : changed.jstree, open_node.jstree, close_node.jstree, enable_node .jstree, activate_node.jstree, select_node.jstree, set_state.jstree, refresh.jstree

나의 이해는 내가 노드 클릭 할 때마다 호출 activate_node.jstree, 따라서는 save_state 방법을 발사함으로써 재현해야한다는 것입니다 페이지를 다시로드/리다이렉트 할 때 올바른 선택.

이 문제의 원인은 무엇입니까?

Answer 1

해결되었습니다. 이 문제는 모든 내부 이벤트가 완료되지 않은 jsTree로 인해 발생했습니다. 모든 이벤트가 완료되고 save_state에 도달하기 전에 브라우저가 리디렉션 될 때까지 Save_state가 호출되지 않으므로 예측할 수없는 동작이 발생합니다.

setTimeout을 사용하여 브라우저의 리디렉션이 즉시 차단되어 문제가 해결되었습니다. 값은 임의이지만 100 밀리 초가 나를 위해 작동하는 것처럼 보였다.

// Binds a link to each node to redirect user 
$('#jsCategoryTree').on('activate_node.jstree', function(e, data) { 
    var categoryId = data.node.id; 
    setTimeout(function() {location.href = '/?categoryId=' + categoryId;}, 100); 
});