Skip to content

Commit 7cbd3e3

Browse files
committed
rewrite some of the initial paragraph and refactor filenames
1 parent 0a2dc07 commit 7cbd3e3

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

guides/release/components/actions-and-events.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
Like we mentioned in the beginning of this section, components are like custom,
2-
user defined HTML elements. So far we've seen how to to pass argument values
1+
Like we mentioned at the beginning of this section, components are like custom,
2+
user-defined HTML elements. So far we've seen how to pass argument values
33
into components, which is similar to passing attributes into HTML elements like
4-
`input`s, `select`s, or `dialog`s, and how you can use those values child
5-
component, and how that component can use those arguments from both JavaScript
6-
and its template. We've also seen how you can pass actual HTML attributes
7-
forward, allowing you to customize the elements that components produce.
4+
`input`s, `select`s, or `dialog`s and how components can use these argument values
5+
for both their JavaScript and template. We've also seen how you can pass
6+
actual HTML attributes forward, allowing you to customize the elements that
7+
components produce.
88

99
But how do we make these components interactive? How do we respond to user
10-
actions like clicks, scrolls, touch events, etc. And how do we add our own
10+
actions like clicks, scrolls, touch events, etc? And how do we add our own
1111
events to our components, to send back in the opposite direction? How does data
1212
flow back out of the component to the parent?
1313

@@ -25,7 +25,7 @@ to confirm in order to trigger some action.
2525
We'll call this the `ButtonWithConfirmation` component. We can start off with a
2626
normal component definition, like we've seen before:
2727

28-
```handlebars {data-filename=src/ui/components/button-with-confirmation/template.hbs}
28+
```handlebars {data-filename=app/templates/components/button-with-confirmation.hbs}
2929
<button type="button">{{@text}}</button>
3030
3131
{{#if this.showConfirmation}}
@@ -40,7 +40,7 @@ normal component definition, like we've seen before:
4040
{{/if}}
4141
```
4242

43-
```js {data-filename=src/ui/components/button-with-confirmation/component.js}
43+
```js {data-filename=app/components/button-with-confirmation.js}
4444
import Component from '@glimmer/component';
4545
import { tracked } from '@glimmer/tracking';
4646

@@ -59,7 +59,7 @@ on [State Management](../../state-management).
5959
Next, we need to hook up the button to toggle that property. We'll
6060
do this with an _action_:
6161

62-
```js {data-filename=src/ui/components/button-with-confirmation/component.js}
62+
```js {data-filename=app/components/button-with-confirmation.js}
6363
import Component from '@glimmer/component';
6464
import { tracked } from '@glimmer/tracking';
6565
import { action } from '@ember/object';
@@ -103,7 +103,7 @@ Now if we click on the button, it will show the confirmation dialog - our first
103103
interactive component! We'll also want the modal to close when we click either
104104
of the modal buttons, so we can add a couple more actions to handle that:
105105

106-
```js {data-filename=src/ui/components/button-with-confirmation/component.js}
106+
```js {data-filename=app/components/button-with-confirmation.js}
107107
import Component from '@glimmer/component';
108108
import { tracked } from '@glimmer/tracking';
109109
import { action } from '@ember/object';
@@ -162,7 +162,7 @@ buttons.
162162
Let's create a parent component, the `UserProfile` component, where the user can
163163
delete their profile:
164164

165-
```handlebars {data-filename=src/ui/components/user-profile/template.hbs}
165+
```handlebars {data-filename=app/templates/components/user-profile.hbs}
166166
<ButtonWithConfirmation
167167
@text="Click OK to delete your account."
168168
/>
@@ -174,7 +174,7 @@ then confirms. In the first case, we'll find the user's account and delete it.
174174
We'll implement an action on the parent component called
175175
`userDidDeleteAccount()` that, when called, gets a hypothetical `login`
176176
[service](../../applications/services/) and calls the service's `deleteUser()`
177-
method. We'll go over services more later on - for now, think of it as an API
177+
method. We'll go over services later on - for now, think of it as an API
178178
that manages the user's login and information.
179179

180180
```javascript {data-filename=app/components/user-profile.js}
@@ -201,7 +201,7 @@ In order to trigger the action when the user clicks "OK" in the
201201
`ButtonWithConfirmation` component, we'll need to pass the action _down_ to it
202202
as an argument:
203203

204-
```handlebars {data-filename=src/ui/components/user-profile/template.hbs}
204+
```handlebars {data-filename=app/templates/components/user-profile.hbs}
205205
<ButtonWithConfirmation
206206
@text="Click OK to delete your account."
207207
@onConfirm={{this.userDidDeleteAccount}}

0 commit comments

Comments
 (0)