骨干/木偶CollectionView-在模板内部渲染? [英] Backbone / Marionette CollectionView - Render inside template?

问题描述

我使用Backbone/Marionette/Mustache可以很好地绘制收藏集.

I have a collection rendering well using Backbone/Marionette/Mustache.

所以PersonModel和PersonView正常工作. PersonView有一个名为PersonTemplate的胡子模板，该模板已由我的PeopleCollection和PeopleCollectionView完美加载，并在默认的tagname: "div"中呈现.

So PersonModel and PersonView are working fine. PersonView has a mustache template called PersonTemplate that is being loaded perfectly by my PeopleCollection and PeopleCollectionView and rendering inside a default tagname: "div".

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

However, I want to render this collection inside of another template so I can put some headers there.

现在基本上是:

<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比此处给出的示例复杂得多.

I understand I can add these items with jQuery after the fact, but I was hoping to avoid that because my actual CollectionTemplate is much more complex than the example given here.

推荐答案

CompositeView正是您所需要的.这是我为简单注释面板设置CompositeView的方法.

CompositeView is exactly what you need. Here is how I have CompositeView setup for simple notes panel.

每个注释的项目视图:

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:

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将要进入的容器(我是每个ItemView都将进入)

In your CompositeView definition you specifiy what template you want to use (panelTemplate) in my example. Than you specify which ItemView to use for each model in the collection that composite view holds. (View.NoteRow in my example). Than you define the container within your template that each ItemView will go into ( I'm each of my ItemViews into )

这篇关于骨干/木偶CollectionView-在模板内部渲染?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！