Skip to content

template-no-route-action.md

Latest commit

 

History

History
153 lines (116 loc) · 3.58 KB

template-no-route-action.md

File metadata and controls

153 lines (116 loc) · 3.58 KB

ember/template-no-route-action

💼 This rule is enabled in the 📋 template-lint-migration config.

HBS Only: This rule applies to classic .hbs template files only (loose mode). It is not relevant for gjs/gts files (strict mode), where these patterns cannot occur.

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