Geek Answers Handbook

Backbone.Marionette - passing a variable to a composite tag

UPDATE (RELATED DETAILS): This composite view is in the collection of composite views.

How can I build the following HTML using the composite representation of Backbone.Marionette?

<optgroup label="Group 1"> <option>Item 1</option> <option>Item 2</option> <option>Item 3</option> </optgroup> <optgroup label="Group 2"> <option>Item 4</option> <option>Item 5</option> <option>Item 6</option> </optgroup>

Since I want to avoid the <div> shell, I will need to specify <optgroup> as tagName.

 view = Backbone.Marionette.CompositeView.extend({ collection: some_collection, itemView: some_itemview, template: '#some_template', <!-- What goes inside the template? --> itemViewContainer: 'optgroup', tagName:'optgroup', <!--specify to avoid the default div--> <!-- What should I specify in order to pass label="Group1" to the optgroup tag--> });
0
source share
3 answers

Do not use CompositeView for this. You do not need a wrapper template, since in this case only the <optgroup> tag is a wrapper.

Instead, use a CollectionView that does not display a wrapper template.

For group # use the onRender method

 view = Backbone.Marionette.CollectionView.extend({ collection: some_collection, itemView: some_itemview, tagName:'optgroup', onRender: function(){ this.$el.attr("label", "Group 1"); } });
+5
source

You can set the attributes of a view element, for example, the initialize or onRender function, for example:

 view = Backbone.Marionette.CompositeView.extend({ ... initialize: function() { this.$el.attr('label', 'foobar'); } });

or replace initialize with:

  onRender: function() { this.$el.attr('label', 'foobar'); }

OR

If you have an existing item, for example:

 <optgroup id="myGroup" label="Group 1"> </optgroup>

You can set the view element as such:

 view = Backbone.Marionette.CompositeView.extend({ el: $('#myGroup'), ... });
+3
source

The combination of Derik and Lasse answers leads me to a solution. onRender was what I was missing. The following is a summary for future readers.

Presentation structure of nested collections:

 Collection of Collections --> Collection --> Item --> Collection --> Item --> ... etc.

CollectionOfCollections =

 Backbone.Marionette.CollectionView.extend({ collection: myCollectionOfCollections, itemView: Collection <!--this refers to the next Collection view below--> });

Collection =

 Backbone.Marionette.CollectionView.extend({ collection: myCollection, itemView: ItemView, <!-- again... the next view below --> tagName: 'optgroup',

Nested Collections with Backbone.Marionette

  <!-- IF YOU ARE PASSING A SIMPLE ARRAY, IT MUST BE CONVERTED TO A REAL COLLECTION FIRST --> initialize: function(){ var xyz = this.model.get('abc'); this.collection = new Backbone.Collection.extend({}); }); onRender: function(){ <!-- Here where you insert the attribute into the tag --> this.$el.attr('label', this.model.get('name')); } }); });

ItemView =

 ModalDropdownEntryView = TourView.extend({ model: myModel, template: '#myTemplate', tagName: 'option', });
+2
source

More articles:


All Articles