CODEWITHSUNDEEP
javascriptjqueryember.jshandlebars.js
Ian Steffy
Ian Steffy

Reputation: 1234

Ember.js Action handlebars {{action}} do not work with <option> html tag

I want an action to be triggered when i click an option in a dropdown that I have. This works fine if the {{action}} is placed anywhere else.

Below does NOT work

   <div class="permit-time-dropdown select">
    <select>
      <option selected="">Nov. 19, 2013 - Dec. 19, 2013</option>
      <option {{action 'dateRangeSelected' this bubbles=false}} id="customDateRangeSelected">Custom</option>
    </select>
  </div>

Below DOES work

  <div {{action 'dateRangeSelected' this bubbles=false}} class="permit-time-dropdown select">
    <select>
      <option selected="">Nov. 19, 2013 - Dec. 19, 2013</option>
      <option id="customDateRangeSelected">Custom</option>
    </select>
  </div>

Even the example that does work only triggers when i click the down arrow. Oh ember handlebars, your logic escapes me.

Upvotes: 1

Views: 2115

Answers (1)

melc
melc

Reputation: 11671

The first example does not work because the {{action}} helper by default will handle the onclick event. Generally the onclick event should not be placed on each option, instead the onchange event on the select element should be handled to find out the option selected (plenty of threads on SO discuss this eg HTML javascript select action).

So in order to handle the onchange event on the select, something like the following could be entered,

http://emberjs.jsbin.com/jukicaxe/1/edit

hbs

<script type="text/x-handlebars" data-template-name="index">
    <div class="permit-time-dropdown select">
    <select {{action 'dateRangeSelected' this on="change" bubbles=false target="view"}}>
      <option id="date1" selected="">Nov. 19, 2013 - Dec. 19, 2013</option>
      <option id="customDateRangeSelected">Custom</option>
    </select>
  </div>
  </script>

js

App.IndexView = Ember.View.extend({

  actions:{
    dateRangeSelected:function(){
      alert(this.$('select').val());
    }
  }

});

In this example since there is no model related, I chose to retrieve the value from the DOM using jquery so the action is handled at the view level .

Upvotes: 3

Related Questions