ember.js 如何对辛烷组分执行可选操作?

643ylb08  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(136)

我想写一个Octane/Glimmer风格的组件,其中动作的传递是可选的。写这个的最好方法是什么?
例如,我希望组件的这两种用法都有效:

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

现在,我的组件类有很多代码,看起来像这样,在调用它之前检查一个操作是否被传入:

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

这对于一个操作来说是可行的,但是如果我需要连续调用几个可选的方法,那就不行了。

xkrw2x1b

xkrw2x1b1#

有几个选项可以让这个可选的动作代码更简洁a-使用getter、使用tryInvoke、使用helper或者编写装饰器。
使用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提供的信息!

相关问题