select-2-component.coffee

`import Ember from 'ember'`

Select2Component = Ember.TextField.extend
  tagName: 'div'
  classNames: ['select2']

  autoFocus: false
  source: []
  closeOnSelect: false
  multiSelect: false
  selectedData: []
  placeholder: ""

  setupSelectedListener: ->
    @.$().off 'select2-selecting'
    @.$().on 'select2-selecting', (e) =>
      @sendAction 'selectionSelected', e.choice

  setupRemovedListener: ->
    @.$().off 'select2-removing'
    @.$().on 'select2-removing', (e) =>
      @sendAction 'selectionRemoved', e.choice

  setupClearingListener: ->
    @.$().off 'select2-clearing'
    @.$().on 'select2-clearing', (e) =>
      @sendAction 'selectionCleared', e.choice

  setupClosedListener: ->
    @.$().off 'select2-close'
    @.$().on 'select2-close', =>
      @sendAction 'dropdownClosed'

  setSelectedData: (->
    @.$().select2('val', @get('selectedData').mapProperty('id'))
  ).observes('selectedData')

  initSelection: (el, callback) ->
    selectedData = @get('selectedData') || []
    callback(selectedData.compact())

  repaint: ->
    @teardown()
    @setup()

  setup:(->
    options                    = {}
    options.formatSelection    = @get('selectedTemplate') if @get('selectedTemplate')
    options.formatResult       = @get('resultsTemplate') if @get('resultsTemplate')
    options.multiple           = @get('multiSelect')
    options.data               = @get('source')
    options.ajax               = @get('remoteSource') if @get('remoteSource')
    options.dropdownCssClass   = @get('dropdownClass') if @get('dropdownClass')
    options.initSelection      = Ember.run.bind(this, @initSelection)

    # just pass these through to select2
    passThroughOptions = [
      'allowClear'
      'closeOnSelect'
      'minimumInputLength',
      'minimumResultsForSearch'
      'placeholder',
      'width']
    options[opt] = @get(opt) for opt in passThroughOptions when @get(opt)

    @.$().select2(options)
    @setupSelectedListener()
    @setupRemovedListener()
    @setupClosedListener()
    @setupClearingListener()
    @setSelectedData()

    @addObserver('source', @, @repaint)
  ).on('didInsertElement')

  teardown: (->
    @.$().off 'select2-selecting'
    @.$().off 'select2-removing'
    @.$().off 'select2-close'
    @removeObserver('source', @, @repaint)
  ).on('willDestroyElement')

`export default Select2Component`

select-2-multiple-component.coffee

`import Select2Component from 'app/pods/components/select-2/component'`

Select2MultipleComponent = Select2Component.extend
  multiSelect: true

  setSelectedData: (->
    @$().select2('val', (@get('selectedData') || []).mapProperty('id'))
  ).observes('selectedData')

`export default Select2MultipleComponent`

select-2-single-component.coffee

`import Select2Component from 'app/pods/components/select-2/component'`

Select2SingleComponent = Select2Component.extend
  setSelectedData: (->
    @.$().select2('val', @get('selectedData'))
  ).observes('selectedData')

  initSelection: (el, callback) ->
    callback(@get('selectedData'))

`export default Select2SingleComponent`