city_select.coffee

#template for select option, I use it to show regions and draw country flags for each city
cityOptionTpl = (obj)->
  _.tpl('CitySelectOption')(obj)

#helper for rendering option
renderCityOption = (entry)->
  tplRes = cityOptionTpl({it:
    title         : entry.title
    region        : entry.region
    country_name  : entry.country_name
    country_short : entry.country_short
  })
  $(tplRes)

#I use this frequently, hence extended Bb.View directly
_.extend Backbone.View.prototype, {
  
  #method to create select2 from element on the View's $el
  createCitySelect: ($target,errorCallback)->
    #i18n is an object, where I store strings that will be used later
    i18n = App.i18n.interface.city_selector

    $target.select2({
      #magic comes in
      dataAdapter: $.fn.select2.amd.require('select2/data/extended-ajax')
      #default cities list, preloaded on page render (top 10 by population in my case)
      defaultResults: ->
        App.bootstraps.preloadedCities

      minimumInputLength : CNS.LocationCommon.SEARCH_MIN_LENGTH

      #define custom error messages
      placeholder: App.i18n.interface.city_selector.placeholder
      language:
        inputTooShort: =>
          i18n.input_too_short

        errorLoading: =>
          i18n.error_loading

        loadingMore: =>
          i18n.loading_more

        noResults: =>
          i18n.no_results

      #some magic. there is a gotcha when processing bootstrapped element and response result
      templateSelection: (entry) =>
        if entry.location_id
          $res = renderCityOption(entry)
        else if entry.element
          attrs = $(entry.element).data()
          $res  = $(cityOptionTpl(it: {
            title         : attrs.cityTitle
            region        : attrs.cityRegion
            country_name  : attrs.countryName
            country_short : attrs.countryShort
          }))
        else
          entry.text

      templateResult: (entry) =>
        renderCityOption(entry)
      
      #options for AjaxAdapter
      ajax:
        delay: 250
        url: App.routes.locations_search_path()

        data: (params) ->
          {q: params.term.slice(0,App.LocationCommon.SEARCH_MAX_LENGTH)}

        processResults: (data,term) ->
          data = data || []
          result = data.map (entry)->
            res      = entry
            res.id   = entry.location_id
            res.text = entry.title
            res
          
          {results : result}

        error: (r)->
          errorCallback.call(@,r)

    })
}

#
# usage example
#

# I use Marionette.js, hence onAttach is an ideal place for selector initializaion.
# With raw Backbone.js you should call createCitySelect when view is rendered and attached

  onAttach: ->
    @createCitySelect(@ui.citySelect, (r) =>
      #use Backbone.Radio to notify App about errors
      @channel.trigger('xhrError',r)
    )
    
  onDestroy: ->
    @ui.citySelect.select2('destroy')