Как обернуть выражение руля в тег span, и сделать тег span кликабельным?

Question

Строка datePick является вычисляемым свойством внутри кнопки, вы можете щелкнуть значение datePick, чтобы вызвать событие, но нажатие за пределами значения datePick внутри кнопки не вызывает событие.

Я попытался обернуть еговнутри промежутка и ширины: 100%, но он все равно не активен

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

Я хочу, чтобы он занимал все пространство внутри кнопки и делал его кликабельным везде.

Answer 1

В Ember Octane (3.13 Preview, 3.14+) вы захотите сделать что-то вроде этого (основываясь на ответе @ tehprofess)

в вашем шаблоне:

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

Answer 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