如何在 span 标签中包装车把表达式，并使 span 标签可点击？答案

【问题标题】：How to wrap handlebars expression in span tag, and make span tag clickable?如何在 span 标签中包装车把表达式，并使 span 标签可点击？
【发布时间】：2019-10-04 09:02:13
【问题描述】：

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

我尝试将它包裹在一个 span 中并给出 width: 100% 但它仍然不可点击

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

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

【问题讨论】：

请包含更多代码，尤其是按钮和事件处理程序。最好是在 Ember Twiddle 或 CodeSandbox 上复制。

标签： html css ember.js handlebars.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

您是否尝试过添加类似的内容：

<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

【讨论】：

将点击事件附加到跨度不利于可访问性。至少这需要一个 role=button 属性和一些 CSS 来确保它获得正确的鼠标指针，我认为弄清楚如何修复原始按钮是一个更好的解决方案。