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

【问题标题】：Backbone / Marionette CollectionView - Render inside template?Backbone / Marionette CollectionView - 在模板内渲染？
【发布时间】：2014-06-04 23:17:59
【问题描述】：

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

所以PersonModel 和PersonView 工作正常。 PersonView 有一个名为 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 比此处给出的示例复杂得多。

【问题讨论】：

看看 Marionette 的 CompositeView (marionettejs.com/docs/v1.8.5/marionette.compositeview.html)，它完全符合您的要求（据我了解）。

标签： javascript jquery backbone.js marionette

【解决方案1】：

CompositeView 正是您所需要的。这是我为简单笔记面板设置 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。（在我的示例中为 View.NoteRow）。比您在模板中定义每个 ItemView 将进入的容器（我是我的每个 ItemViews 进入）

【讨论】：