javascript - Backbone.Marionette: Add header to collection view -

using backbone.marionette, render collection of items along header.

i'm aware marionette.collectionview not have template, renders itemviews.

i'm using marionette.layoutview, have define dom element 'list' region.

is there other way this? possibly without dom element?

maybe change open() particular region?

---

current result:

<div class='collection'>   <h3>featured</h3>   <div class="list"></div> </div> 

desired result:

<div class='collection'>   <h3>list name</h3>   <ul>     <li>item 1</li>     <li>item 2</li>     <li>item 3</li>    </ul> </div> 

---

render code:

var col = new lcollection([{name: "foo"}, {name: "bar"}]); // defined earlier, not relevant here var list = new listview({collection: col}); var layout = new mylayout({model: new backbone.model({name: "featured"})});  app.featured.show(layout); layout.list.show(list); 

views:

var listitemview = backbone.marionette.itemview.extend({   template: '#list-item',   tagname: 'li' });  var lessonlistview = backbone.marionette.collectionview.extend({   tagname: 'ul',   itemview: listitemview });  var mylayout = backbone.marionette.layout.extend({   template: "list-layout",    regions: {     list: '.list'   } }); 

templates:

<script type="text/template" id="list-item">   <%= name %> </script>  <script type="text/template" id="list-layout">   <h3><%= name %></h3>   <div class="list"></div> </script> 

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.compositeview.md

applied :

templates

<script id="list-item" type="text/html">   <%= name %> </script>  <script id="list-layout" type="text/html">     <div class='collection'>         <h3><%= name %></h3>         <ul></ul>     </div> </script> 

js

rowview = backbone.marionette.itemview.extend({   tagname: "li",   template: "#list-item" });  tableview = backbone.marionette.compositeview.extend({   itemview: rowview,   // specify jquery selector put itemview instances in   itemviewcontainer: "ul",   template: "#list-layout" });