no-route-action.md

no-route-action

✅ The extends: 'recommended' property in a configuration file enables this rule.

This rule disallows the usage of route-action.

ember-route-action-helper was a popular addon used to add actions to a route without creating a separate controller. Given the changes in Ember since ember-route-action-helper was a widely used pattern, controllers are now encouraged and we want to discourage the use of route-action.

Most route actions should either be sent to the controller first or encapsulated within a downstream component instead. We should never be escaping the DDAU hierarchy to lob actions up to the route.

Examples

This rule forbids the following:

<CustomComponent @onUpdate={{route-action 'updateFoo'}} />

<CustomComponent @onUpdate={{route-action 'updateFoo' 'bar'}} />

{{custom-component onUpdate=(route-action 'updateFoo')}}

{{custom-component onUpdate=(route-action 'updateFoo' 'bar')}}

With the given route:

// app/routes/foo.js
export default class extends Route {
  @action
  updateFoo(baz) {
    // ...
  }
}

This rule allows the following:

<CustomComponent @onUpdate={{this.updateFoo}} />

<CustomComponent @onUpdate={{fn this.updateFoo 'bar'}} />

{{custom-component onUpdate=this.updateFoo}}

{{custom-component onUpdate=(fn this.updateFoo 'bar')}}

With the given controller:

// app/controllers/foo.js
export default class extends Controller {
  @action
  updateFoo(baz) {
    // ...
  }
}

Migration

The example below shows how to migrate from route-action to controller actions.

Before

// app/routes/posts.js
export default class extends Route {
  model(params) {
    return this.store.query('post', { page: params.page })
  }

  @action
  goToPage(pageNum) {
    this.transitionTo({ queryParams: { page: pageNum } });
  }
}

// app/controllers/posts.js
export default class extends Controller {
  queryParams = ['page'];
  page = 1;
}

{{#each @model as |post|}}
  <Post @title={{post.title}} @content={{post.content}} />
{{/each}}

<button {{action (route-action 'goToPage' 1)}}>1</button>
<button {{action (route-action 'goToPage' 2)}}>2</button>
<button {{action (route-action 'goToPage' 3)}}>3</button>

After

// app/routes/posts.js
export default class extends Route {
  model(params) {
    return this.store.query('post', { page: params.page })
  }
}

// app/controllers/posts.js
export default class extends Controller {
  queryParams = ['page'];
  page = 1;

  @action
  goToPage(pageNum) {
    this.transitionToRoute({ queryParams: { page: pageNum } });
  }
}

{{#each @model as |post|}}
  <Post @title={{post.title}} @content={{post.content}} />
{{/each}}

<button {{on 'click' (fn this.goToPage 1)}}>1</button>
<button {{on 'click' (fn this.goToPage 2)}}>2</button>
<button {{on 'click' (fn this.goToPage 3)}}>3</button>

References

• ember-route-action-helper
• Ember guides/Controllers
• Ember Best Practices: What are controllers good for?