Question

我使用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比这里给出的例子复杂得多。

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

现在模板：

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都放入其中）

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

1 个答案: