Marionette CompositeView in the select>option context

Question

I'm trying to set up a simple Marionette's CompositeView. Here's what I want in the end:

%select#target-id
  %option{:value => "#{@id}"} = @name
  %option{:value => "#{@id}"} = @name 
  etc

In my CompositeView I specify the childViewContainer: select and I need to display both @name (for the readability) and @id (for the related event) in the options of this select. Due to the nature of default div element I can to speficfy tagName as option in my ItemView:

class New.TargetView extends App.Views.ItemView
    template: "path/to/template"
    tagName: 'option'

And in the template I can pass only the content of to-be-created option element: = @name. This works fine, Marionette creates an option element for each model and populates it with the name of the model. The problem is that I don't know how to pass an attributes as well, since I can't specify an attribute of the element that hasn't been created yet.

I've also tried to set an attributes property on the ItemView like this:

attributes:
    value: "#{@id}"

And it technically works: the options are populated with the value="" attribute, but the content is undefined. Please advice.

Answer 1

I'm not sure about part when you use attributes. You should pass hash or function that will return hash as stated in Backbone view.attributes docs.

attributes:
    value: "#{@id}"

In old money it works like this. Here is jsfiddle.

attributes: function () {
    return {
        value: this.model.id
    };
}

Answer 2

CompositeView and ItemView are views that require a Marionette collection and model, respectively. When you create a CompositeView you pass a collection of models, each of which will be passed to the corresponding ItemView.

My guess is that it's not a problem with the template but with how you are setting up the data. As far as I know, there is no attributes option for ItemView, you have to either initialize the CompositeView with a properly formed collection or create the new attributes with the serializeData method on the ItemView.

In the first case, you will do something like this:

var SomeCompositeView = Marionette.CompositeView.extend({
    template: "your-template-name",
    childViewContainer: select
});

var SomeItemView = Marionette.ItemView.extend({
    template: "your-other-template",
    tagName: 'option'
});

// This collection can be retrieved from a database or anywhere else
// Just make sure that the models have the fields you want
var myCollection = new Backbone.Collection([{id: "someid1", name: "name1"}, {id: "someid2", name: "name2"}]);

var view = new SomeCompositeView({collection: myCollection});

On the second case you'll have something similar but on the ItemView you'll have:

var SomeItemView = Marionette.ItemView.extend({
    template: "your-other-template",
    tagName: 'option',
    serializeData: function () {
        return { someAttribute: "someValue" }
    }
}

Just remember that for this second approach, the ItemView has to have access to the values you are returning. serializeData is only for reformatting data or performing operations on the data that you cannot perform on the template. The template will only have access to the variables you are returning from serializeData, independently of the original model.