OptionGroup in select binded with stickit

Question

I use Backbone.stickit, Backbone.marionette and Backbone on the client side for an edition page.

One of the fields of my model is picked up from a dropdown (<select>) and I want to create option groups (<optgroup>) in the dropdown. How can I do?

/* Models */
// Language/Models.js
Language = Backbone.Model.extend({});
LanguageCollection = Backbone.Collection.extend({
    model: Language
});
// Book/Models.js
Book = Backbone.Model.extend({});

/* Views */
// Book/Views.js
BookAttributesView = Marionette.ItemView.extend({
    el: "#BookAttributesBox",
    template: "#BookAttributesTemplate",
    bindings:
    {
        "#Title": "Title",
        "#AuthorName": "AuthorName",
        "#LanguageCode": {
            observe: "LanguageCode",
            selectOptions: {
                collection: new LanguageCollection([{ Name: "English", Code: "en"}, {Name: "German", Code: "de" }]),
                labelPath: "Name",
                valuePath: "Code"
            }
        }
    },
    onRender: function () {
        this.stickit();
    }
});

/* Render view */
var book = new Book({ Title: "Dune", AuthorName: "Frank Herbert", LanguageCode: "en" });
new BookAttributesView({ model: book }).render();

body {
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.min.js"></script>
<script src="https://rawgithub.com/NYTimes/backbone.stickit/master/backbone.stickit.js"></script>

<!-- Views/Books/Templates/BookAttributes.cshtml -->
<script type="text/template" id="BookAttributesTemplate">
<div class="form-group">
    <label for="Title">Title</label>
    <input id="Title" type="text" class="form-control" placeholder="Title"">
</div>
<div class="form-group">
    <label for="AuthorName">Author</label>
    <input id="AuthorName" type="text" class="form-control" placeholder="Author">
</div>
<div class="form-group">
    <label for="LanguageCode">Language</label>
    <select id="LanguageCode" class="form-control">
    </select>
</div>
</script>

<!-- Views/Books/Edit.cshtml -->
<h1>Book edition</h1>
<h2>Attributes</h2>
<div id="BookAttributesBox"></div>

Answer 1

I found in backbone.stickit documentation that we can override the update method.

In the binding of my select, I added the following code :

update: function($el, val, model, options) {
LanguageChannel.data.languages.each(function(language){
    // Find parent.
    var parent = $el.find("#LanguageReadable");
    if (language.get("isEditable")){
        parent = $el.find("#LanguageEditable");
    }

    // Select correct value.
    var selected = "";
    if (language.get("Code") == val){
        selected = ' selected="selected"';
    }

    // Add option to optgroup.
    parent.append("<option" + selected + ">" + language.get("Name") + "</option>");
});}

Here is my entire solution :

/* Models */
// Language/Models.js
Language = Backbone.Model.extend({});
LanguageCollection = Backbone.Collection.extend({
    model: Language
});
// Book/Models.js
Book = Backbone.Model.extend({});

languages = new LanguageCollection([
                  {Name: "English", Code: "en", isEditable:true},
                  {Name: "French", Code: "fr", isEditable:false},
                  {Name: "German", Code: "de", isEditable:true},
                  {Name: "Spanish", Code: "es", isEditable:false}
            ]);

/* Views */
// Book/Views.js
BookAttributesView = Marionette.ItemView.extend({
    el: "#BookAttributesBox",
    template: "#BookAttributesTemplate",
    bindings:
    {
        "#Title": "Title",
        "#AuthorName": "AuthorName",
        "#LanguageCode": {
            observe: "LanguageCode",
            selectOptions: {
                collection: languages,
                labelPath: "Name",
                valuePath: "Code"
            },
            update: function($el, val, model, options) {
                languages.each(function(language){
                    // Find parent.
                    var parent = $el.find("#LanguageReadable");
                    if (language.get("isEditable")){
                        parent = $el.find("#LanguageEditable");
                    }
                    
                    // Select correct value.
                    var selected = "";
                    if (language.get("Code") == val){
                        selected = ' selected="selected"';
                    }
                    
                    // Add option to optgroup.
                    parent.append("<option" + selected + ">" + language.get("Name") + "</option>");
                });
            }
        }
    },
    onRender: function () {
        this.stickit();
    }
});

/* Render view */
var book = new Book({ Title: "Dune", AuthorName: "Frank Herbert", LanguageCode: "de" });
new BookAttributesView({ model: book }).render();

body {
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="http://marionettejs.com/downloads/backbone.marionette.min.js"></script>
<script src="https://rawgithub.com/NYTimes/backbone.stickit/master/backbone.stickit.js"></script>

<!-- Views/Books/Templates/BookAttributes.cshtml -->
<script type="text/template" id="BookAttributesTemplate">
<div class="form-group">
    <label for="Title">Title</label>
    <input id="Title" type="text" class="form-control" placeholder="Title"">
</div>
<div class="form-group">
    <label for="AuthorName">Author</label>
    <input id="AuthorName" type="text" class="form-control" placeholder="Author">
</div>
<div class="form-group">
    <label for="LanguageCode">Language</label>
    <select id="LanguageCode" class="form-control">
        <optgroup id="LanguageEditable" label="Editable langauges">
        <optgroup id="LanguageReadable" label="Readable languages">
    </select>
</div>
</script>

<!-- Views/Books/Edit.cshtml -->
<h1>Book edition</h1>
<h2>Attributes</h2>
<div id="BookAttributesBox"></div>