设置Ember组件的id并处理单击事件

Question

我正在尝试实现一个简单的Ember组件，该组件具有动态id属性并处理点击事件，但我无法同时执行这两项操作。如果我设置id属性，则不会触发click事件;如果我删除动态id，则点击会触发。

我将id设置为属性绑定，我还有一些其他类名绑定。

我是否通过尝试设置组件的id属性来覆盖某些Ember功能？如果是这样，您将如何设置组件的动态id属性？

这是我的component.js：

import Ember from 'ember';

export default Ember.Component.extend({
  active: false,
  elemId: "none",
  type: "none",
  click: function() {
    console.log("Clicked!!");
    return true;
  },

  tagName: 'span',
  classNames: ['annotation'],
  attributeBindings: ['id'],
  classNameBindings: ['typeClass', 'activeClass'],
  activeClass: function() {
    return this.get('active') ? `annotation-${this.get('type')}-active` : '';
  }.property('active'),
  typeClass: function() {
    return `annotation-${this.get('type')}`;
  }.property(),
  id: function() {
    return this.get('elemId');
  }.property()
});

我目前正在使用Ember v2.2.0。