如何将 handlebars 表达式包装在 span 标签中，并使 span 标签可点击？

Question

datePick 字符串是一个按钮内部计算出来的属性，点击datePick 值可以触发事件，点击按钮内部datePick 值以外的地方不会触发事件。

我尝试将它包裹在一个跨度内并设置宽度：100%，但它仍然不可点击

<span>
      {{capitalize datePick}}
</span>

我希望它在一个按钮内占据整个 space 并使其在任何地方都可以点击。

Answer 1

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

<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

Answer 2

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

在您的模板中：

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

不过，要使用语义 HTML（并提高可访问性），您确实需要按钮来实现可点击的内容。

<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');
  }
}

如何将 handlebars 表达式包装在 span 标签中，并使 span 标签可点击？

How to wrap handlebars expression in span tag, and make span tag clickable?

html

css

handlebars.js

ember.js