Created
November 6, 2012 21:22
-
-
Save orientalperil/4027655 to your computer and use it in GitHub Desktop.
SelectWithOptgroups: a subclass of Ember.Select
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment