Ember Ember.select get selected value

Question

I have a simple Ember application where I have an input box, two select boxes and a button. I can access the value of the input box in the method "doSearch", but not the values of select boxes. So far, nothing I tried worked - I commented out my failing attempts to access the selection. I'm beginnig to think this has to be related to my limited knowledge of Ember.

Any help will be much appreciated. Here is my HTML and script:

    <script type="text/x-handlebars" data-template-name="application">
        <div id="headerDiv">
            <ul>
                <li>
                   <image src="logo.png" style="width:439px;height:102px;"/>
                </li>
                <li>
                    {{input type="text" placeholder="Search content" value=newSearch action="doSearch"}}
                </li>
                <li>
                    <button type="button" {{action "doSearch"}}>Search</button>
                </li>
                <li>{{#link-to 'home'}}Home{{/link-to}} | {{#link-to 'help'}}Help{{/link-to}}</li>
            </ul>
        </div>

        <span class="filter">Content Type:
            {{view Ember.Select
               content=selectContentType
               optionValuePath="content.value"
               optionLabelPath="content.label"}}
        </span>
        <span class="filter">Date:
            {{view Ember.Select
               content=selectDate
               optionValuePath="content.value"
               optionLabelPath="content.label"}}
        </span>
    </script>

This is the javascript where I'm attempting to reach the select boxes:

App = Ember.Application.create();

App.Router.map(function(){
    this.resource('home', { path: '/' });
    this.resource('help');
});

App.ApplicationController = Ember.ArrayController.extend({
    selectContentType: [
        {label: "All", value: "all"},
        {label: "Text", value: "text"},
        {label: "Image", value: "image"}
    ],
     selectDate: [
        {label: "None", value: "none"},
        {label: "Today", value: "today"},
        {label: "Last 7 days", value: "7days"}
    ],
    actions: {
        doSearch: function () {
          var searchVal = this.get('newSearch');
          if (!searchVal.trim()) {return;}
          console.log('got searchVal: ',searchVal );

          var selectType = $("#selectContentType").val();
          //$("#selectContentType option:selected").val();
          //this.get('selectContentType.value');              
          console.log('got selectType: ',selectType );
        }
    }
});

Answer 1

Extend your ApplicationController with two new variables to hold the selected values:

App.ApplicationController = Ember.ArrayController.extend({
  selectedContentType: null,
  selectedDate: null,
  ...
});

and use the selectionBinding property of the Ember.Select class to bind to those variables

<span class="filter">Content Type:
  {{view Ember.Select
    content=selectContentType
    optionValuePath="content.value"
    optionLabelPath="content.label"
    selectionBinding=selectedContentType}}
</span>
<span class="filter">Date:
  {{view Ember.Select
    content=selectDate
    optionValuePath="content.value"
    optionLabelPath="content.label"
    selectionBinding=selectedDate}}
</span>

then you can later access them easily with:

App.ApplicationController = Ember.ArrayController.extend({
  selectedContentType: null,
  selectedDate: null,
  ...
  actions: {
    doSearch: function () {
      var selectedDate = this.get('selectedDate.value');
      console.log( selectedDate );

      var selectedType = this.get('selectedContentType.value');
      console.log( selectedType );
    }
  }
});

Hope it helps.