html - 如何在span标签中包装 Handlebars 表达式，并使span标签可点击？

datePick字符串是按钮内部的计算属性，您可以单击datePick值以触发事件，但是在按钮内部的datePick值外部单击不会触发事件。

我尝试将其包裹在一个跨度中并给出宽度：100％，但仍然不可点击

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

我希望它占据按钮内的整个空间，并使其在任何地方都可单击。

最佳答案

在Ember Octane（3.13 Preview，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');
  }
}