CODEWITHSUNDEEP
ember.js
user2917629
user2917629

Reputation: 942

Ember Ember.select get selected value

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 );
        }
    }
});

Upvotes: 4

Views: 7810

Answers (1)

intuitivepixel
intuitivepixel

Reputation: 23322

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.

Upvotes: 7

Related Questions