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助手。 ember-composable-helpers插件具有optional助手。在模板中像这样使用它。

{{action (optional @validate) someArg}}

最后，您可以编写自己的装饰器，并将其命名为@argumentFallback，然后使用它来标记如果没有向组件提供参数的情况下组件应使用的默认值。

感谢bendemboski和theroncross提供的信息！

如何对辛烷值组件执行可选操作？

1 个答案: