Backbone/Marionette CollectionView-在模板内渲染？

Question

我有一个使用Backbone/Marionette/Mustache很好地渲染的集合。

所以 PersonModel 和 PersonView 工作正常。 PersonView 有一个名为mustache模板 PersonTemplate 这是由我的完美加载 PeopleCollection 和 PeopleCollectionView 并在默认值内渲染 tagname: "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>

我知道我可以在事后用jQuery添加这些项目，但我希望避免这种情况，因为我的实际 CollectionTemplate 比这里给出的例子要复杂得多。

Answer 1

CompositeView正是你所需要的。以下是我如何为简单的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>

在你的CompositeView定义中，你指定了你想在我的例子中使用什么模板（panelTemplate）。比您指定要为复合视图所持有的集合中的每个模型使用的ItemView。（查看。NoteRow在我的例子中）。比您在模板中定义每个ItemView将进入的容器（我是我的每个Itemview）