Select Lists in Marionette CompositeView

Question

I am using Marionette to try an render a list of questions. Each question can have a select list of question types that will also come from the server. I would prefer to keep this list in the top level of the json instead of on each question. Is there any way to loop over the questions in the ItemView, yet still have access to the question types in the template?

I can do this as one large template that gets re-rendered each time, but would prefer to avoid that.

JSON:

var json = {
        questions: [
            { id: 1, questionType: "FreeText", label: "What is your name?" }
        ],
        questionTypes: [
            { label: "Free Text", qtype: "FreeText" },
            { label: "Single Select", qtype: "Select" },
            { label: "Multi Select", qtype: "MultiSelect" }
        ]
    };

Template:

{{#each questions}}
                <div class="question-editor">
                    <button class="remove-question" data-id="{{this.id}}">X</button>
                    <label for="QuestionType">Question Type:</label> 
                        <select name="QuestionType">
                            {{#each ../questionTypes}}
                                <option value="{{this.qtype}}" {{#isOptionSelected ../questionType this.qtype}} selected="selected" {{/isOptionSelected}}>{{this.label}}</option>
                            {{/each}}
                        </select>
                        <br />
                        <label for="Label">Label:</label> 
                        <input type="text" name="Label" value="{{this.label}}" />
                </div>
            {{/each}}

danikoren danikoren · Accepted Answer · 2013-05-09T06:57:00

you can use marionette's CompositeView.

from marionette documentation:

ItemView = Backbone.Marionette.ItemView({
  initialize: function(options){
    console.log(options.foo); // => "bar"
  }
});

CollectionView = Backbone.Marionette.CompositeView({
  itemView: ItemView,

  itemViewOptions: {
    foo: "bar"
  } 
});

you can pass the questionTypes as itemViewOptions for each row

Select Lists in Marionette CompositeView

1 Answers