Backbone/Marionette CollectionView - Renderizar dentro do modelo?

Question

Eu tenho uma coleção que renderiza bem usando Backbone/Marionette/Mustache.

Então PersonModel e PersonView estão funcionando bem. PersonView tem um modelo de bigode chamado PersonTemplate que está sendo carregado perfeitamente pelo meu PeopleCollection e PeopleCollectionView e renderização dentro de um padrão tagname: "div".

No entanto, quero renderizar essa coleção dentro de outro modelo para poder colocar alguns cabeçalhos lá.

No momento é essencialmente:

<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>

Mas eu gostaria que fosse:

<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>

Entendo que posso adicionar esses itens com jQuery após o fato, mas esperava evitar isso porque meu trabalho real CollectionTemplate é muito mais complexo do que o exemplo dado aqui.

Answer 1

CompositeView é exatamente o que você precisa.Aqui está como eu configurei o CompositeView para o painel de notas simples.

Visualização de itens para cada nota:

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

A visão composta:

  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"
                }
  })

Agora os modelos:

painelModelo:

<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>

E o modelo de linha:

<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>

Na sua definição do CompositeView você especifica qual modelo deseja usar (panelTemplate) no meu exemplo.Em seguida, você especifica qual ItemView usar para cada modelo na coleção que a visualização composta contém.(View.NoteRow no meu exemplo).Em seguida, você define o contêiner dentro do seu modelo em que cada ItemView irá (eu estou em cada um dos meus ItemViews)