백본/마리오네트 CollectionView - 템플릿 내부 렌더링?

백본/마리오네트/콧수염을 사용하여 잘 렌더링 된 컬렉션이 있습니다.백본/마리오네트 CollectionView - 템플릿 내부 렌더링?

그래서 PersonModel 및 PersonView이 잘 작동합니다. PersonView에는 내 PeopleCollection 및 PeopleCollectionView으로 완벽하게로드되고 tagname: "div" 기본값으로 렌더링되는 PersonTemplate이라는 콧수염 템플릿이 있습니다.

그러나이 콜렉션을 다른 템플리트 안에 렌더링하고 일부 헤더를 넣을 수 있습니다.

<div> <!-- collection tagName --> 
    <div class="person"> <!-- PersonTemplate --> 
     <div class="person-name">John</div> 
    </div> 
    <div class ="person"> <!-- PersonTemplate --> 
     <div class="person-name">Dave</div> 
    </div> 
</div>

그러나 나는 그것이 싶습니다 :

는 지금은 본질적이다 내가 사후 jQuery를 이러한 항목을 추가 할 수 있습니다 이해

<div id="people> <!-- CollectionTemplate --> 
    <h1>People</h1> <!-- CollectionTemplate --> 
    <div class="person"> <!-- PersonTemplate --> 
     <div class="person-name">John</div> 
    </div> 
    <div class ="person"> <!-- PersonTemplate --> 
     <div class="person-name">Dave</div> 
    </div> 
</div>

,하지만 난 피하기 위해 기대했다 왜냐하면 내 실제 CollectionTemplate은 여기에 제시된 예보다 훨씬 복잡하기 때문입니다.

출처

2014-06-04 diplosaurus

Marionette의 CompositeView (http://marionettejs.com/docs/v1.8.5/marionette)를보십시오. compositeview.html), 그것은 정확히 당신이 찾고있는 것을 수행합니다 (내가 이해하는 한). – christian314159

정확히 당신이 필요로하는 것입니다. 다음은 간단한 노트 패널을위한 CompositeView 설정 방법입니다. 각 음에 대한

항목보기 :

View.NoteRow = Marionette.ItemView.extend({ 
       template: Handlebars.compile(rowTemplate), 
       tagName: "tr", 
       className: "row-item", 
      })

컴포지트보기 : 이제

View.NotesPanel = Marionette.CompositeView.extend({ 
       template: Handlebars.compile(panelTemplate), 
       itemView: View.NoteRow, 
       itemViewContainer: "tbody", 
       className: "panel panel-default button-panel notes-panel", 

       events: { 
        "click button#add-note" : "addNote" 
       } 
    })

템플릿 :

panelTemplate :

<div class="panel-heading"> 
    <div class="container-fluid"> 
     <div class="row "> 
      <div class="col-md-6 col-lg-9"> 
       <h3 class="panel-title"><i class="fa fa-pencil"></i> Notes</h3> 
      </div> 
      <div class="col-md-6 col-lg-3 button-column"> 
       <a href="#"><button id="add-note" class="btn btn-xs btn-success"><i class="fa fa-plus"></i> Add Note</button></a> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="panel-body"> 
    <table id="notes-table" class="table"> 
     <thead> 
     <tr> 

      <th>User</th> 
      <th>Note</th> 


     </tr> 
     </thead> 
     <tbody> 

     </tbody> 
    </table> 
</div>

그리고 행 템플릿 :

<td>{{employee_id}}</td> 
<td> 
    <p>{{note_text}}</p> 
    <p><span class="tooltip-span timestamp" id="account-created" data-toggle="tooltip" title="{{created_at}}">{{humanize created_at}}</span></p> 
</td>

CompositeView 정의에서 내 예제에서 사용할 템플릿 (panelTemplate)을 지정합니다. 합성보기가 보유하는 콜렉션의 각 모델에 사용할 ItemView를 지정하십시오. (내보기에서는 View.NoteRow). 템플릿 내에서 각 ItemView가 들어갈 컨테이너를 정의하십시오 (저는 각 ItemViews에 들어갑니다)

출처

2014-06-05 01:23:01 MikeWu

백본/마리오네트 CollectionView - 템플릿 내부 렌더링?

답변

관련 문제