Trying to grok Em.Select

app_router.js.coffee

SocialRoi.Router = Ember.Router.extend
  enableLogging: true
  location: 'hash'
  root: Ember.Route.extend

    # removed a bunch of unrelated routing code
    reports: Ember.Route.extend

      # SETUP
      route: '/reports'

      # EVENTS
      createReport: Ember.Route.transitionTo 'create'
      cancel: (router, event) ->
        router.get('applicationController.transaction').rollback()
        router.transitionTo('index')
      save: (router, event) ->
        router.get('applicationController.transaction').commit()
        router.transitionTo('index')

      # STATES
      index: Ember.Route.extend

        # SETUP
        route: '/'
        connectOutlets: (router) ->
          router.get('applicationController').connectOutlet 'reports', SocialRoi.Report.find()

      create: Ember.Route.extend
        # SETUP
        route: '/new'
        connectOutlets: (router) ->
          transaction = router.get('store').transaction()
          report = transaction.createRecord(SocialRoi.Report)

          router.get('applicationController').set('transaction', transaction)
          router.get('applicationController').connectOutlet
            viewClass: SocialRoi.NewReportView
            controller: router.get('reportController')
            context: report

        # EVENTS
        unroutePath: (router, path) ->
          router.get('applicatinoController.transaction').rollback()
          @_super(router, path)

enterprise.js.coffee

SocialRoi.Enterprise = DS.Model.extend
  name:     DS.attr('string')
  eto_guid: DS.attr('string')

form.handlebars

<form {{action save on="submit"}} class="form-horizontal">

  <legend>Create New Report</legend>

  <div class="control-group">
    <label class="control-label" for="report_name">Name</label>
    <div class="controls">
      {{view Em.TextField valueBinding="name" id="report_name" class="span3"}}
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="report_enterprise_guid">Enterprise</label>
    <div class="controls">
      {{! Incorrect, but not sure why }}
      {{view Em.Select
             contentBinding="enterprises"
             optionLabelPath="content.name"
             optionValuePath="content.eto_guid"
             id="report_enterprise_guid"
             class=""}}
    </div>
  </div>

  <div class="form-actions">
    <button type="submit" class="btn btn-primary">Save</button>
    &nbsp;&nbsp;
    <a {{action cancel}} class="btn">Cancel</a>
</form>

new.handlebars

{{view SocialRoi.ReportFormView}}

new_report_view.js.coffee

SocialRoi.NewReportView = Ember.View.extend
  templateName: 'reports/new'

report.js.coffee

SocialRoi.Report = DS.Model.extend
  name:                DS.attr('string')
  configuration_state: DS.attr('string')
  enterprise_guid:     DS.attr('string')
  enterprise_name:     DS.attr('string')
  enterprise_guid:     DS.attr('string')
  site_name:           DS.attr('string')
  site_id:             DS.attr('number')
  program_name:        DS.attr('string')
  program_id:          DS.attr('number')

  enterprises: (->
    SocialRoi.Enterprise.find()
  ).property()

report_controller.js.coffee

SocialRoi.ReportController = Em.ObjectController.extend()

report_form_view.js.coffee

SocialRoi.ReportFormView = Em.View.extend
  templateName: 'reports/form'
  didInsertElement: ->
    @$(':text:visible:enabled:first').focus()