|
2 | 2 |
|
3 | 3 | <!-- end auto-generated rule header --> |
4 | 4 |
|
5 | | -Disallows unnecessary usage of the `{{fn}}` helper. |
| 5 | +The `fn` helper can be used to bind arguments to another function. Using it without any arguments is redundant because then the inner function could just be used directly. |
6 | 6 |
|
7 | | -When `{{fn}}` is used with only a function reference and no arguments to curry, it's redundant. You can pass the function directly. |
8 | | - |
9 | | -## Rule Details |
10 | | - |
11 | | -This rule detects when `{{fn}}` is called with only one argument (the function itself) and no curried arguments. |
| 7 | +This rule is looking for `fn` helper usages that don't provide any additional arguments to the inner function and warns about them. |
12 | 8 |
|
13 | 9 | ## Examples |
14 | 10 |
|
15 | | -Examples of **incorrect** code for this rule: |
16 | | - |
17 | | -```gjs |
18 | | -<template> |
19 | | - <button {{on "click" (fn this.handleClick)}}>Click</button> |
20 | | -</template> |
21 | | -``` |
| 11 | +This rule **forbids** the following: |
22 | 12 |
|
23 | | -```gjs |
24 | | -<template> |
25 | | - <Component @action={{fn this.save}} /> |
26 | | -</template> |
| 13 | +```hbs |
| 14 | +<button {{on 'click' (fn this.handleClick)}}>Click Me</button> |
27 | 15 | ``` |
28 | 16 |
|
29 | | -Examples of **correct** code for this rule: |
| 17 | +This rule **allows** the following: |
30 | 18 |
|
31 | | -```gjs |
32 | | -<template> |
33 | | - <button {{on "click" this.handleClick}}>Click</button> |
34 | | -</template> |
| 19 | +```hbs |
| 20 | +<button {{on 'click' this.handleClick}}>Click Me</button> |
35 | 21 | ``` |
36 | 22 |
|
37 | | -```gjs |
38 | | -<template> |
39 | | - <button {{on "click" (fn this.handleClick arg)}}>Click</button> |
40 | | -</template> |
41 | | -``` |
42 | | - |
43 | | -```gjs |
44 | | -<template> |
45 | | - <Component @action={{this.save}} /> |
46 | | -</template> |
47 | | -``` |
48 | | - |
49 | | -## Migration |
50 | | - |
51 | | -Replace: |
52 | | - |
53 | | -```gjs |
54 | | -<button {{on "click" (fn this.action)}}> |
55 | | -``` |
56 | | - |
57 | | -With: |
58 | | - |
59 | | -```gjs |
60 | | -<button {{on "click" this.action}}> |
| 23 | +```hbs |
| 24 | +<button {{on 'click' (fn this.handleClick 'foo')}}>Click Me</button> |
61 | 25 | ``` |
62 | 26 |
|
63 | 27 | ## References |
64 | 28 |
|
65 | | -- [eslint-plugin-ember template-no-redundant-fn](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-no-redundant-fn.md) |
| 29 | +- [Ember Guides](https://guides.emberjs.com/release/components/component-state-and-actions/#toc_passing-arguments-to-actions) |
| 30 | +- [`fn` API documentation](https://api.emberjs.com/ember/3.20/classes/Ember.Templates.helpers/methods/fn?anchor=fn) |
0 commit comments