javascript - Ember辛烷升级: how to handle eslint error no-action

Question

这与:Ember Octane Upgrade How to pass values from component to controller有关

在 ../templates/change-password.hbs 文件中，我收到以下 eslint 错误:

Do not use action as {{action ...}}. Instead, use the on modifier and fn helper. no-action

代码:

<Clients::ChangePasswordForm @chgpwd={{this.model}} @changePassword={{action 'changePassword'}} @errors={{this.errors}} />

接受的答案指示我使用该语法。我应该有不同的方式来处理这个问题还是应该忽略该错误？

Answer 1

在 Ember Octane 中，更新了 linter，以鼓励使用 on 修饰符和 fn 辅助函数，而不是 action 辅助函数和修饰符。 action 修饰符用于将正确的 this 上下文绑定(bind)到函数。对于 Octane，@action 装饰器是将上下文绑定(bind)到任何方法的推荐方法。

在您的情况下，由于您将 changePassword 作为闭包操作传递给组件 Clients::ChangePasswordForm，因此将函数传递给组件的推荐方法是如下:

<Clients::ChangePasswordForm 
  @chgpwd={{this.model}}
  @changePassword={{this.changePassword}}
  @errors={{this.errors}} 
/>

如果您需要将任何参数(例如 this.argument)与函数一起传递，请使用 fn 辅助函数:

<Clients::ChangePasswordForm 
  @chgpwd={{this.model}}
  @changePassword={{fn this.changePassword this.argument}}
  @errors={{this.errors}} 
/>

既然您已经标记了您的操作 with @action decorator 。你已准备好出发。

这是official guide关于如何从经典事件处理程序升级到 Octane 推荐方式

lint 消息可能会更有帮助，并且已经有一个 issue opened在 ember-template-lint 存储库上，在使用经典 action 帮助程序时公开更有用的错误消息。