Question

UPDATE (RELEVANT DETAIL): This composite view is within a collection of composite views.

How can I construct the following HTML using a Backbone.Marionette composite view?

    <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> wrapper, I will have to specify <optgroup> as the 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-->
});

Answer 1

Don’t use a CompositeView for this. You don’t need a wrapper template since the wrapper in this case is only the <optgroup> tag.

Use a CollectionView instead, which doesn’t render a wrapper template.

For the 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");
    }

});