javascript - Ember.js Action Handlebars {{action}} 不适用于 <option> html 标签

Question

我希望当我点击我拥有的下拉菜单中的一个选项时触发一个 Action 。如果将 {{action}} 放置在其他任何地方，这就可以正常工作。

下面不工作

   <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>

下面确实有效

  <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>

即使是有效的示例，也只有在我单击向下箭头时才会触发。哦，ember Handlebars ，你的逻辑让我无法理解。

Answer 1

第一个示例不起作用，因为默认情况下 {{action}} 助手将处理 onclick 事件。通常，onclick 事件不应放在每个选项上，而应处理 select 元素上的 onchange 事件以找出 >option selected(SO 上有很多线程讨论这个，例如 HTML javascript select action)。

因此，为了处理选择上的 onchange 事件，可以输入如下内容，

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

健康管理系统

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

});

在这个例子中，由于没有模型相关，我选择使用 jquery 从 DOM 中检索值，因此操作是在 view 级别处理的。