Javascript 主干/木偶收集视图-在模板内渲染？

我有一个使用主干线/提线木偶/胡子的收藏

因此

PersonModel

和

PersonView

工作正常

PersonView

有一个名为

PersonTemplate

的小胡子模板，由my

PeopleCollection

和

PeopleCollectionView

完美加载，并在默认的

标记名：“div”

内呈现

但是，我希望在另一个模板中呈现此集合，以便在其中放置一些标题

现在基本上是：

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

约翰
戴夫

但我希望它是：

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

---

CompositeView正是您所需要的。下面是我如何为simple notes面板设置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"
                }
  })

现在，模板：

面板模板：

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

{{employee_id}
{{note_text}}

{{人性化创建{u at}}


在CompositeView定义中，在我的示例中指定要使用的模板（panelTemplate）。然后为复合视图所包含的集合中的每个模型指定要使用的ItemView。（在我的示例中是View.NoteRow）。然后在模板中定义每个ItemView将进入的容器（我是我的每个ItemView）
看看木偶网的CompositeView（），它完全符合您的要求（据我所知）。