我想编写一个Octane / Glimmer样式的组件,其中传递动作是可选的。编写此内容的最佳方法是什么?
例如,我希望组件的这两种用法都有效:
现在,我的组件类有很多看起来像这样的代码,在调用之前检查是否传递了动作:
这对于一个动作来说效果很好,但是如果我需要连续调用几个可选方法,那就不行了。还有什么其他选择?
有几种方法可以使此可选操作的代码更加整洁-使用getter,use tryInvoke
,使用helper或编写装饰器。
使用吸气剂是原始的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提供的信息!