Select \w Optional Groups

optional-groups-select.hbs

{{#if view.prompt}}
    <option value="">{{view.prompt}}</option>
{{/if}}

{{#if view.optionGroupPath}}
    {{#each view.groupedContent}}
        {{#if content}}
            {{view view.groupView content=content label=label}}
        {{else}}
            {{view view.optionView content=this}}
        {{/if}}
    {{/each}}
{{else}}
    {{#each view.content}}
        {{view view.optionView content=this}}
    {{/each}}
{{/if}}

optional-groups-select.js

var get = Ember.get, 
    forEach = Ember.EnumerableUtils.forEach;

Ember.Select.extend({
    templateName: 'optional-groups-select',
    
    groupedContent: Ember.computed(function() {
        var groupPath = get(this, 'optionGroupPath');
        var groupedContent = Ember.A();
        var content = get(this, 'content') || [];

        forEach(content, function(item) {
            var label = get(item, groupPath);

            if (label) {
                if (get(groupedContent, 'lastObject.label') !== label) {
                    groupedContent.pushObject({
                        label: label,
                        content: Ember.A()
                    });
                }

                get(groupedContent, 'lastObject.content').push(item);

            } else {
                groupedContent.pushObject(item);
            }
        });

        return groupedContent;
    }).property('optionGroupPath', 'content.@each')
});