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>

直播demo

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

1 个答案: