Ractive.js 부모 관계가있는 단일 항목 배열의 중첩 목록

Question

id, parentid 및 message 속성 목록이 있습니다. parentid은 같은 목록의 다른 항목을 참조합니다. 중첩 수준에는 제한이 없습니다. 어떻게 구현할 것인가?

var data = [ 
    { 
     id: 1, 
     parentid: 0, 
     message: "I'm 1, and I have no parent." 
    }, { 
     id: 2, 
     parentid: 1, 
     message: "I'm 2, and 1 is my parent." 
    }, { 
     id: 3, 
     parentid: 1, 
     message: "I'm 3, and 1 is my parent." 
    }, { 
     id: 4, 
     parentid: 0, 
     message: "I'm 4, and I have no parent." 
    }, { 
     id: 5, 
     parentid: 1, 
     message: "I'm 5, and 2 is my parent." 
    } 
]; 

을 그리고이로 돌려 : 즉

, 방법이를 데리고

<ul> 
    <li> 
     I'm 1, and I have no parent. 
     <ul> 
      <li> 
       I'm 2, and 1 is my parent. 
       <ul> 
        <li> 
         I'm 5, and 2 is my parent. 
        </li> 
       </ul> 
      </li> 
      <li> 
       I'm 3, and 1 is my parent. 
      </li> 
     </ul> 
    </li> 
    <li> 
     I'm 4, and I have no parent. 
    </li> 
</ul> 

템플릿에서이 작업을 수행하는 방법을 친절하고 빠른 방법이 있나요? 전체 배열을 루핑하지 않고 새 배열을 만들고 렌더링하는 일없이?

심지어 아무것도 남지 않을 때까지 재귀 적으로 렌더링되는 템플릿의 가장 좋은 구현은 무엇입니까?

ractive.js와

Answer 1

, 당신은 부분과 표현의 도우미 함수를 사용하여 배열을 필터링하는 자바 스크립트를 사용할 수 (전체 예를 들어 http://jsfiddle.net/pUf5P/1/ 참조)

템플릿 :

{{# { index: 0 } }} 
{{>lister}} 
{{/ }} 

<!-- {{>lister}} --> 
    <ul> 
    {{# filter(list, .index) }} 
    <li>{{message}} 
     {{# { index: id } }} 
     {{>lister}} 
     {{/ }} 
    </li> 
    {{/ }} 
    </ul> 
<!-- {{/lister}} --> 

설정 :

new Ractive({ 
    el: 'body', 
    template: '#template', 
    data: { 
     list: data, 
     filter: function(list, parent){ 
      return list.filter(function(item){ 
       return item.parentid === parent 
      }) 
     }  
    } 
}) 

순수 템플릿 솔루션 (http://jsfiddle.net/pUf5P/2/ 참조)의 경우 다음을 수행 할 수 있습니다.

업데이트 : "전체 배열을 반복하면서 새 건물을 만들지 않고"이 작업을 수행하려고했지만 각 레벨에서 전체 배열을 반복하여 일치하는 하위 항목을 찾을 수 있다는 것을 알고 있습니다. 당신은 단지 부모의 ID를 기반으로 항목을 버킷, 계층 구조를 구축 할 필요가 없습니다 (http://jsfiddle.net/pUf5P/3/ 참조)

{{# { index: 0 } }} 
{{>lister}} 
{{/ }} 

<!-- {{>lister}} --> 
    <ul> 
    {{# { list: byParent[index]} }} 
     {{#list}} 
     <li> {{(.message)}} 
     {{# { index: .id } }} 
     {{>lister}} 
     {{/ }}    
     </li> 
     {{/list}} 
    {{/ }} 

    </ul> 
<!-- {{/lister}} -->