title.js

App.SelectWithOptgroups = Ember.Select.extend({
    // A version of Ember.Select that supports optgroup tags.
    // content can contain objects that represent the options or the optgroups
    // Example of an optgroup object:
    // Ember.Object.create({
    //     optgroup_label: 'foo',
    //     content: [Ember.Object.create({label: 'First Name', value: 'first_name'}), Ember.Object.create({label: 'Last Name', value: 'last_name'})]
    // })
    defaultTemplate: Ember.Handlebars.compile('{{#if view.prompt}}<option>{{view.prompt}}</option>{{/if}}{{#each view.content}}{{#if optgroup_label}}<optgroup {{bindAttr label="optgroup_label"}}>{{#each content}}{{view Ember.SelectOption contentBinding="this"}}{{/each}}</optgroup>{{else}}{{view Ember.SelectOption contentBinding="this"}}{{/if}}{{/each}}'),
    options: function() {
        // Return an array of the option objects (extracted from optgroup objects if necessary).
        var options = [];

        this.get('content').forEach(function(item){
            if (! item.get('optgroup_label')) {
                options.pushObject(item);
            }
            else {
                options.pushObjects(item.get('content'));
            }
        });
        return options;
    }.property('content'),
    valueDidChange: Ember.observer(function() {
        // set this.selection when this.value changes
        var options = this.get('options'),
        value = this.get('value'),
        valuePath = this.get('optionValuePath').replace(/^content\.?/, ''),
        selectedValue = (valuePath ? this.getPath('selection.' + valuePath) : this.get('selection')),
        selection;

        if (value !== selectedValue) {
            selection = options.find(function(obj) {
                return value === (valuePath ? obj.get(valuePath) : obj);
            });

            this.set('selection', selection);
        }
    }, 'value'),
    _changeSingle: function() {
        var selectedIndex = this.$()[0].selectedIndex,
        content = this.get('content'),
        prompt = this.get('prompt');

        if (!content) {
            return;
        }
        if (prompt && selectedIndex === 0) {
            this.set('selection', null);
            return;
        }

        if (prompt) {
            selectedIndex -= 1;
        }
        this.set('selection', this.get('options').objectAt(selectedIndex));
    },
    _selectionDidChangeSingle: function() {
        var el = this.$()[0],
        options = this.get('options'),
        selection = this.get('selection'),
        selectionIndex = options ? options.indexOf(selection) : -1,
        prompt = this.get('prompt');

        if (prompt) {
            selectionIndex += 1;
        }
        if (el) {
            el.selectedIndex = selectionIndex;
        }
    }
});