Skip to content

Commit 4818d99

Browse files
committed
Add Target Action Support deprecation guide
1 parent fb67e7b commit 4818d99

File tree

1 file changed

+61
-0
lines changed

1 file changed

+61
-0
lines changed
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: Deprecate Target Action Support
3+
until: 7.0.0
4+
since: 6.8.0
5+
---
6+
7+
The `actions` hash on components, controllers, and routes, along with the `send` method, is deprecated. These APIs were primarily used with the now-deprecated `{{action}}` modifier and helper.
8+
9+
The modern approach is to use standard class methods decorated with the `@action` decorator, and to pass functions directly.
10+
11+
### `actions` hash and `send`
12+
13+
**Old Pattern**
14+
15+
Previously, you would define actions in an `actions` hash and use `this.send('actionName')` to call them.
16+
17+
```javascript
18+
// app/components/my-component.js
19+
import Component from '@ember/component';
20+
21+
export default Component.extend({
22+
actions: {
23+
save() {
24+
// ... saving logic
25+
},
26+
cancel() {
27+
// ... cancel logic
28+
}
29+
},
30+
31+
someMethod() {
32+
this.send('save');
33+
}
34+
});
35+
```
36+
37+
**New Pattern**
38+
39+
With modern classes, you can define methods directly on the class and decorate them with `@action`. You can then call them like any other method.
40+
41+
```javascript
42+
// app/components/my-component.js
43+
import Component from '@glimmer/component';
44+
import { action } from '@ember/object';
45+
46+
export default class MyComponent extends Component {
47+
@action
48+
save() {
49+
// ... saving logic
50+
}
51+
52+
@action
53+
cancel() {
54+
// ... cancel logic
55+
}
56+
57+
someMethod() {
58+
this.save();
59+
}
60+
}
61+
```

0 commit comments

Comments
 (0)