Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit dee2c34

Browse files
committed
replace "expression" w/ "statement"
Matches changes made in b24c813
1 parent 01da1e1 commit dee2c34

File tree

1 file changed

+13
-12
lines changed

1 file changed

+13
-12
lines changed

public/docs/dart/latest/guide/user-input.jade

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,20 @@ include ../../../../_includes/_util-fns
1212
We can use Angular event bindings <!-- PENDING: link to ./template-syntax.html#event-binding -->
1313
to respond to [any DOM event](https://developer.mozilla.org/en-US/docs/Web/Events).
1414

15-
The syntax is simple. We assign a template expression to the DOM event name, surrounded in parentheses.
15+
The syntax is simple. We surround the DOM event name with
16+
parentheses and assign a quoted template statement to it.
1617
As an example, here's an event binding that implements a click handler:
1718
+makeExample('user-input/dart/lib/click_me_component.dart', 'click-me-button')(format=".", language="html")
1819

1920
<a id="click"></a>
2021
:marked
2122
The `(click)` to the left of the equal sign identifies the button's click event as the **target of the binding**.
22-
The text within quotes on the right is the **template expression** in which we
23-
respond to the click event by calling the component's `onClickMe` method. A template expression <!-- PENDING: link to ./template-syntax.html#template-expressions --> is a subset
24-
of Dart with a few added tricks.
23+
The text within quotes on the right is the **template statement** in which we
24+
respond to the click event by calling the component's `onClickMe` method. A template statement <!-- PENDING: link to ./template-syntax.html#template-statements --> is a subset
25+
of Dart with restrictions and a few added tricks.
2526

26-
When writing a binding we must be aware of a template expression's **execution context**.
27-
The identifiers appearing within an expression belong to a specific context object.
27+
When writing a binding we must be aware of a template statement's **execution context**.
28+
The identifiers appearing within a statement belong to a specific context object.
2829
That object is usually the Angular component that controls the template ... which it definitely is
2930
in this case because that snippet of HTML belongs to the following component:
3031

@@ -121,8 +122,8 @@ figure.image-display
121122
Angular only updates the bindings (and therefore the screen)
122123
if we do something in response to asynchronous events such as keystrokes.
123124

124-
That's why we bind the `keyup` event to an expression that does ... well, nothing.
125-
We're binding to the number 0, the shortest expression we can think of.
125+
That's why we bind the `keyup` event to a statement that does ... well, nothing.
126+
We're binding to the number 0, the shortest statement we can think of.
126127
That is all it takes to keep Angular happy. We said it would be clever!
127128
:marked
128129
That local template variable is intriguing. It's clearly easier to get to the textbox with that
@@ -140,14 +141,14 @@ figure.image-display
140141
## Key event filtering (with `key.enter`)
141142
Perhaps we don't care about every keystroke.
142143
Maybe we're only interested in the input box value when the user presses Enter, and we'd like to ignore all other keys.
143-
When we bind to the `(keyup)` event, our event handling expression hears *every keystroke*.
144+
When we bind to the `(keyup)` event, our event handling statement hears *every keystroke*.
144145
We could filter the keys first, examining every `$event.keyCode`, and update the `values` property only if the key is Enter.
145146

146147
Angular can filter the key events for us. Angular has a special syntax for keyboard events.
147148
We can listen for just the Enter key by binding to Angular's `keyup.enter` pseudo-event.
148149

149150
Only then do we update the component's `values` property. (In this example,
150-
the update happens inside the event expression. A better practice
151+
the update happens inside the event binding statement. A better practice
151152
would be to put the update code in the component.)
152153
+makeExample('user-input/dart/lib/keyup_components.dart', 'key-up-component-3' ,'web/keyup_components.dart (v3)')(format=".")
153154
:marked
@@ -207,7 +208,7 @@ figure.image-display
207208
Instead, we grab the input box *value* and pass *that* to `addHero`.
208209
The component knows nothing about HTML or the DOM, which is the way we like it.
209210

210-
### Keep template expressions simple
211+
### Keep template statements simple
211212
We bound `(blur)` to *two* Dart statements.
212213

213214
We like the first one, which calls `addHero`.
@@ -218,7 +219,7 @@ figure.image-display
218219
input box (our design choice).
219220

220221
Although the example *works*, we are rightly wary of Dart in HTML.
221-
Template expressions are powerful. We're supposed to use them responsibly.
222+
Template statements are powerful. We're supposed to use them responsibly.
222223
Complex Dart in HTML is irresponsible.
223224

224225
Should we reconsider our reluctance to pass the input box into the component?

0 commit comments

Comments
 (0)