如何在Ember组件上获取单击的元素

Question

我正在学习EmberJS,我试图搜索文档和内容,但到目前为止我无法正确实现组件和响应点击事件的动作,现在它只是在控制台中打印一些东西.我想获得点击的元素,这样我就可以改变它的风格和属性.我正在使用ember-cli 版本0.2.7生成的脚手架.遵循以下代码:

app/components/heart-like.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions:{
    click: function (event) {
      console.log(event); // undefined
      console.log("Hello from component");
    }
  }
});

app/templates/components/heart-like.hbs

 <div class="row">
      <span {{action "click"}} class="pull-right" style="color: #B71C1C;"><i class="fa fa-2x fa-heart"></i></span>
</div>

Answer 1

Ember.EventDispatcher将一些事件委托给相应的Ember.View.由于Ember.Component是子类Ember.View,您可以捕获单击事件,只显示一个单击函数:

export default Ember.Component.extend({   
  click: function (event) {
    console.log(event.target); // displays the clicked element
    console.log("Hello from component");
  }
});

请记住,直接使用这些事件挂钩并不是一个好习惯,因为您直接处理DOM,而不是表达您的意图.根据您的使用情况,它只是在组件中创建属性并通过操作进行更改的更好选择.例如,要在点击图标时更改图标的颜色:

零件

export default Ember.Component.extend({
  color: 'red',
  actions:{
    changeColor: function() {
      this.set('color', 'black');
    }
  }
});

模板

  <div class="row">
      <span {{action "changeColor"}} class="pull-right" style="color: {{color}};"><i class="fa fa-2x fa-heart"></i></span>
  </div>

现场演示