Ember.js Chosen integration

Question

I\'ve done a sample Ember.js integration with Chosen (https://github.com/harvesthq/chosen)

Coffeescript:

App.ChosenSelectView = Em.S         


        

Answer 1

This might work for you on Ember 1.0 and Chosen v0.12:

JavaScript:

App.ChosenSelect = Ember.Select.extend({
   chosenOptions: {width:'100%', placeholder_text_multiple: 'Select Editors', search_contains: true},
   multiple:true,
   attributeBindings:['multiple'],

   didInsertElement: function(){
    var view = this;
    this._super();
    view.$().chosen(view.get('chosenOptions'));

    // observes for new changes on options to trigger an update on Chosen 
    return this.addObserver(this.get("optionLabelPath").replace(/^content/, "content.@each"), function() {
      return this.rerenderChosen();
    });

  },
  _closeChosen: function(){
    // trigger escape to close chosen
    this.$().next('.chzn-container-active').find('input').trigger({type:'keyup', which:27});
  },

 rerenderChosen: function() {
    this.$().trigger('chosen:updated');
  }
});

Handlebars:

{{view App.ChosenSelect
    contentBinding="options"
    valueBinding="selectedOption"
    optionLabelPath="content.name"
}}