如何为 Octane 组件执行可选操作？

Question

我想编写一个 Octane/Glimmer 样式的组件，其中传入操作是可选的。什么是最好的写法？

例如，我希望组件的这两种用法都有效：

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

现在，我的组件 class 有很多代码看起来像这样，在调用它之前检查是否传入了一个动作：

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

这对一个动作来说效果很好，但如果我需要连续调用多个可选方法就不行了。还有哪些其他选择？

Answer 1

有几个选项可用于使此可选操作代码更整洁 - 使用 getter、使用 tryInvoke、使用帮助程序或编写装饰器。

使用 getter 是普通的 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 提供的信息！

如何为 Octane 组件执行可选操作？

How do I make an optional action for an Octane component?

ember.js

ember.js-3

ember-octane