在Ember Octane（3.13预览版，3.14+）中，你会想做这样的事情（基于@tehprofessor的回答）
在模板中：

<span {{on 'click' this.showDatePicker}}>
  {{capitalize this.datePick}}
</span>

但是，要使用语义HTML（并改进可访问性），您确实需要用 * button * 来表示可单击内容。

<button {{on 'click' this.showDatePicker}}>
  {{capitalize this.datePick}}
</button>

然后在组件的js：

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class MyComponent extends Component {
  @tracked datePick = '';

  @action showDatePicker(e) {
    e.preventDefault();

    console.log('show the date picker');
  }
}

您是否尝试过添加以下内容：

<span {{action "showDatePicker"}}>
  {{capitalize datePick}}
</span>

并在组件中使用：

import Component from '@ember/component';

export default Component.extend({
  actions: {
    showDatePicker() {
      // Do some stuff to present the date picker.
      console.log('Showing date picker, eh?');
    }
  }
});

action帮助器默认情况下假定该事件是 click 事件，如文档所示：
https://guides.emberjs.com/release/templates/actions/#toc_specifying-the-type-of-event