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
3
3
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.
8
8
9
9
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
11
11
events to our components, to send back in the opposite direction? How does data
12
12
flow back out of the component to the parent?
13
13
@@ -25,7 +25,7 @@ to confirm in order to trigger some action.
25
25
We'll call this the ` ButtonWithConfirmation ` component. We can start off with a
26
26
normal component definition, like we've seen before:
27
27
28
- ``` handlebars {data-filename=src/ui /components/button-with-confirmation/template .hbs}
28
+ ``` handlebars {data-filename=app/templates /components/button-with-confirmation.hbs}
29
29
<button type="button">{{@text}}</button>
30
30
31
31
{{#if this.showConfirmation}}
@@ -40,7 +40,7 @@ normal component definition, like we've seen before:
40
40
{{/if}}
41
41
```
42
42
43
- ``` js {data-filename=src/ui/ components/button-with-confirmation/component .js}
43
+ ``` js {data-filename=app/ components/button-with-confirmation.js}
44
44
import Component from ' @glimmer/component' ;
45
45
import { tracked } from ' @glimmer/tracking' ;
46
46
@@ -59,7 +59,7 @@ on [State Management](../../state-management).
59
59
Next, we need to hook up the button to toggle that property. We'll
60
60
do this with an _ action_ :
61
61
62
- ``` js {data-filename=src/ui/ components/button-with-confirmation/component .js}
62
+ ``` js {data-filename=app/ components/button-with-confirmation.js}
63
63
import Component from ' @glimmer/component' ;
64
64
import { tracked } from ' @glimmer/tracking' ;
65
65
import { action } from ' @ember/object' ;
@@ -103,7 +103,7 @@ Now if we click on the button, it will show the confirmation dialog - our first
103
103
interactive component! We'll also want the modal to close when we click either
104
104
of the modal buttons, so we can add a couple more actions to handle that:
105
105
106
- ``` js {data-filename=src/ui/ components/button-with-confirmation/component .js}
106
+ ``` js {data-filename=app/ components/button-with-confirmation.js}
107
107
import Component from ' @glimmer/component' ;
108
108
import { tracked } from ' @glimmer/tracking' ;
109
109
import { action } from ' @ember/object' ;
@@ -162,7 +162,7 @@ buttons.
162
162
Let's create a parent component, the ` UserProfile ` component, where the user can
163
163
delete their profile:
164
164
165
- ``` handlebars {data-filename=src/ui /components/user-profile/template .hbs}
165
+ ``` handlebars {data-filename=app/templates /components/user-profile.hbs}
166
166
<ButtonWithConfirmation
167
167
@text="Click OK to delete your account."
168
168
/>
@@ -174,7 +174,7 @@ then confirms. In the first case, we'll find the user's account and delete it.
174
174
We'll implement an action on the parent component called
175
175
` userDidDeleteAccount() ` that, when called, gets a hypothetical ` login `
176
176
[ 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
178
178
that manages the user's login and information.
179
179
180
180
``` 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
201
201
` ButtonWithConfirmation ` component, we'll need to pass the action _ down_ to it
202
202
as an argument:
203
203
204
- ``` handlebars {data-filename=src/ui /components/user-profile/template .hbs}
204
+ ``` handlebars {data-filename=app/templates /components/user-profile.hbs}
205
205
<ButtonWithConfirmation
206
206
@text="Click OK to delete your account."
207
207
@onConfirm={{this.userDidDeleteAccount}}
0 commit comments