Backbone Marionette 재귀 목록

Marionette에서 재귀를 수행하는 올바른 방법을 고민하는 데 어려움을 겪고 있습니다. 나는 다른 질문에 대한 해답을 보았지만, 이것을 매우 간단한 예제, 즉 http://jsfiddle.net/vZY2v/으로 분해했다. 나는 그 비밀이 합성물의 사용에 있음을 알고 있습니다. 그러나 나는 그것을하는 올바른 방법에 부딪치지 않았습니다.Backbone Marionette 재귀 목록

이

var jsonData = [{ 
name: 'Bob', 
children: [{ 
    name: 'Jim' 
}, { 
    name: 'Jane' 
}] 
}, { 
name: 'Sally', 
children: [{ 
    name: 'Sue', 
    children: [{ 
     name: 'John' 
    }, { 
     name: 'Lisa' 
    }] 
}] 
}]; 

var Item = Backbone.Model.extend({}); 

var ItemCollection = Backbone.Collection.extend({ 
    model: Item 
}); 

var i = new Item(); 

var Manager = new Marionette.Application(); 
Manager.addRegions({ 
    mainRegion: "#myContainer" 
}); 

var RecursiveView = Marionette.CompositeView.extend({ 
    tagName: "li", 
    template: '#my-item', 
    initialize: function() { 
     if (this.model.get('children')) { 
      this.collection = new ItemCollection(this.model.get('children')); 
     } 
} 
}); 

var MotherView = Marionette.CollectionView.extend({ 
    tagName: "ul", 
    itemView: RecursiveView 
}); 

var myColl = new ItemCollection(jsonData); 
var x = new MotherView({ 
    collection: myColl 
}); 

Manager.mainRegion.show(x);

원하는 출력은 다음과 같습니다

<body> 
    <div id='myContainer'></div> 
    <script type='text/template' id='my-item'> 
     <%= name %> 
    </script> 
</body>

코드입니다 :

<ul> 
    <li>Bob</li> 
    <ul> 
     <li>Jim</li> 
     <li>Jane</li> 
    </ul> 
</ul>

html로는 다음과 같습니다

나는 같은 N 수준의 임베디드 목록을 생성 할 아래처럼 :

밥
- 짐
- 제인
샐리
- 고소
  - 존
  - 리사

출처

2014-01-19 rycel

http://jsfiddle.net/nDfCT/1/에 업데이트 된 예가 나와 있습니다.

는 비밀은 템플릿에 LI 태그를 이동하고 대신에 RecursiveView 렌더링,이 같은 appendHtml 기능을 추가했다 :

var RecursiveView = Marionette.CompositeView.extend({ 
    tagName: "ul", 
    template: '#my-item', 
    initialize: function() { 
    this.collection = this.model.children; 
    }, 
    appendHtml: function (collectionView, itemView) { 
    collectionView.$('li:first').append(itemView.el); 
    } 
});

출처

2014-01-20 14:56:14 rycel

당신은 절대적으로 그와 같은 appendHtml 메소드를 오버라이드 (override) 할 필요가 없습니다 - 이것은 기본적으로 CompositeView가 설계된 것입니다.

나는 당신의 바이올린 업데이트했습니다 http://jsfiddle.net/vZY2v/1/

예, 그것은 여분의 루트 노드를 가지고,하지만 당신은 쉽게 루트 노드가 li 렌더링하지 않는 다른 템플릿, 또는 이름 속성을 가질 수 있습니다 .

가장 큰 차이점은 itemViewContainer을 사용하여 Marionette가 직접 ItemViews를 적절한 장소에 삽입하는 것입니다.

출처

2014-01-22 00:01:44 Tom

Backbone Marionette 재귀 목록

답변

관련 문제