Backbone.Marionette: adding a title to the collection

Question

Using Backbone.Marionette , I would like to display a collection of elements along with the title.

I know that Marionette.CollectionView does not have a template since it only displays ItemView s.

I am currently using Marionette.LayoutView , but you need to define an additional DOM element for the "list" area.

Is there any other way to do this? Perhaps without an additional DOM element?

Maybe I can change open() for this particular area?

---

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> 

---

Visualization 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' } }); 

Patterns

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

Answer 1

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

Applies to you:

Patterns

 <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 a jQuery selector to put the itemView instances in to itemViewContainer: "ul", template: "#list-layout" }); 

Answer 2

Marionette 3 no longer uses CompositeView , so if we want to get something like this:

 <div class='collection'> <h3>List Name</h3> <ul> <li>FOO - BAR</li> <li>FOO - BAR</li> <li>FOO - BAR</li> ... </ul> </div> 

We must use CollectionView and View with regions.

1 - Templates

We are going to define two patterns, the first of which is the “parent” and the other for each “child” parent.

parentTemplate.html

 <div class='collection'> <h3>List Name</h3> <ul></ul> </div> 

childTemplate.html

 <p>Item <%= value%></p> 

2 - Main model and collection

Allows you to define the default model and its collection to populate the list.

 const Item = Backbone.Model.extend({}); const Items = Backbone.Collection.extend({ model: Item }); 

3 - Views

First we need to create a View for our child view, like this:

 import ItemViewTemplate from './childTemplate.html'; const ItemChildView = Marionette.View.extend({ template: _.template(ItemViewTemplate), className: 'item-child-view', tagName: 'li' // <-- The element where we will wrap our item template (it is not defined in the HTML file) }); 

Secondly, we need to create a CollectionView that controls each child, therefore:

 const ItemsCollectionView = Marionette.CollectionView.extend({ tagName: 'ul', // <-- The element where we will wrap our collection of items (it is already in the parent HTML file) childView: ItemChildView, className: 'items-collection-view' }); 

Finally, we need to create a main View that contains parentTemplate.html, and in this we define the area in which we will load the collection of elements, therefore:

 import ItemsViewTemplate './parentTemplate.html'; const ItemsView = Marionette.View.extend({ tagName: 'div', className: 'items-view', template: _.template(ItemsViewTemplate), regions: { body: { el: 'ul', // <-- This is the HTML tag where we want to load our CollectionView replaceElement: true // <-- With this option, we overwrite the HTML tag with our CollectionView tag } } }); 

4- The rest of the code

Now we create the instances necessary for this:

 const app = new Marionette.Application({ region: '#main' }); // Three simple Items let item1 = new Item({value: 1}); let item2 = new Item({value: 2}); let item3 = new Item({value: 3}); // Put this Items into a Collection of Items let items = new Items([item1, item2, item3]); // Create the main View let itemsView = new ItemsView(); app.showView(itemsView); // Create the CollectionView for the Items let itemsCollectionView = new ItemsCollectionView({ collection: items }); // Load the CollectionView of Items into the region that we specified in the main View itemsView.showChildView('body', itemsCollectionView); app.start(); 

5- Result

If we run this, we get:

 <div class="collection"> <h3>List Name</h3> <ul class="items-collection-view"> <li class="item-child-view"><p>Item1</p></li> <li class="item-child-view"><p>Item2</p></li> <li class="item-child-view"><p>Item3</p></li> </ul> </div> 

Hope this helps! Link

Answer 3

I believe the solution above will display the li element directly below the specified div or other region if you did not specify

 tagName: "ul" 

Then it displays the li elements inside the ul element in the specified area.