Ember Octane upgrade: how to handle eslint error no-action

Question

This is related to: Ember Octane Upgrade How to pass values from component to controller

In the ../templates/change-password.hbs file, I am receiving the following eslint error:

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

Code:

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

The accepted answer instructed me to use that syntax. Is there a different way I should be handling this or should I ignore the error?

Answer 1

In Ember Octane, linters are updated to encourage the use of on modifier and fn helper instead of action helper & modifier. The action modifier is used to bind the proper this context to the function. With Octane, @action decorators are the recommended way to bind the context to any method.

In your case, since you are passing the changePassword as a closure action to the component Clients::ChangePasswordForm, the recommended way to pass a function to a component is as follow:

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

in case, you need to pass any argument (say, this.argument) along with the function, use fn helper:

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

Since you've already tagged your action with @action decorator. You are good to go.

Here is the official guide on how to upgrade from classic event handlers to Octane recommended way

The lint message can be more helpful and there is already an issue opened on ember-template-lint repo to expose more useful error message while consuming classic action helper.