Как сделать дополнительное действие для компонента Octane?

Question

Я хочу написать компонент стиля Octane/Glimmer, в котором передача действия не является обязательной. Как лучше всего это написать?

Например, я хочу, чтобы оба этих варианта использования компонента были допустимыми:

<MyComponent />
<MyComponent @validate={{action this.validate}} />

Прямо сейчас в моем классе компонентов есть много кода, который выглядит следующим образом, проверяя, было ли передано действие перед его вызовом:

if (this.args.validate) {
  this.args.validate()
}

Это хорошо работает для одного действия, но не тогда, когда мне нужно последовательно вызывать несколько дополнительных методов. Какие еще есть варианты?

Answer 1

Есть несколько вариантов, позволяющих сделать этот код дополнительных действий более аккуратным: используйте геттер, используйте tryInvoke, используйте помощник или напишите декоратор.

Использование геттера - это ванильный JavaScript, и его проще всего понять другим, читающим код:

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

export default class MyComponent extends Component {
  get validate() {
    return this.args.validate || function() {};
  }

  @action
  someOtherAction() {
    this.validate()
  }
}

tryInvoke- это метод Ember API, который проверяет, существует ли функция перед ее вызовом. Недостатки заключаются в том, что когда другие люди ищут код для использования функции, их поиск может не найти ее:

tryInvoke(this.args, 'validate'); 

Вы можете установить или создать свой собственный optionalпомощник. Эмбер-компонуемых-хелперы аддон имеетoptionalпомощник. Используйте это как это в шаблоне.

{{action (optional @validate) someArg}}

Наконец, вы могли бы написать свой собственный декоратор и назвать его как-то вроде @argumentFallback, затем используйте его для обозначения значений по умолчанию, которые ваш компонент должен использовать, если ему не предоставлены аргументы.

Спасибо bendemboski и theroncross за информацию!