We have a lot of chosen in our ember app, and extracted this superclass to make interaction with them easier, it takes care of refreshing/filling/selecting stuff.
// fix chosen picks up ember script tags -> weird output when search for t or i
// this breaks the bindings within the options tags
// works around https://github.com/harvesthq/chosen/issues/581
App.UnboundSelectOption = Ember.SelectOption.extend({
template: Ember.Handlebars.compile('{{unbound label}}')
});
App.ChosenSelect = Ember.Select.extend({
chosenOptions: {},
template: Ember.Handlebars.compile(
'{{#if prompt}}{{unbound prompt}}{{/if}}' +
'{{#each content}}{{view App.UnboundSelectOption contentBinding="this"}}{{/each}}'
),
didInsertElement: function(){
this._super();
this.$().chosen(this.chosenOptions());
},
_closeChosen: function(){
// trigger escape to close chosen
this.$().next('.chzn-container-active').find('input').trigger({type:'keyup', which:27});
},
rerender: function(){
if(this.get('state') == 'inDOM'){
// remove now disconnected html
this.$().next('.chzn-container').remove();
}
this._super();
},
rerenderChosen: function() {
this.$().trigger('liszt:updated');
}
});