如何獲取Ember Component上的clicked元素

Question

我正在學習EmberJS，我嘗試搜索文檔和相關內容，但到目前為止我做不到，我已經實現了該組件和一個響應click事件的操作，現在它只是在控制台中打印了一些內容。 我想獲取clicked元素，以便更改其樣式和屬性。 我正在使用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.Component的子類， Ember.View您只需捕獲click函數即可捕獲click事件：

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>

現場演示