honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(user-input): replace "expression" w/ "statement" in TS doc

Browse Source 
closes #714
This commit is contained in:
Ward Bell 2016-01-17 21:23:46 -08:00
parent 693c5e60e6
commit b24c813916
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/docs/ts/latest/guide/user-input.jade
View File

@ -14,19 +14,19 @@ include ../../../../_includes/_util-fns
We can use [Angular event bindings](./template-syntax.html#event-binding) We can use [Angular event bindings](./template-syntax.html#event-binding)
to respond to [any DOM event](https://developer.mozilla.org/en-US/docs/Web/Events). to respond to [any DOM event](https://developer.mozilla.org/en-US/docs/Web/Events).
The syntax is simple. We assign a template expression to the DOM event name, surrounded in parentheses. The syntax is simple. We surround the DOM event name in parentheses and assign a quoted template statement to it.
As an example, here's an event binding that implements a click handler: As an example, here's an event binding that implements a click handler:
+makeExample('user-input/ts/app/click-me.component.ts', 'click-me-button')(format=".", language="html") +makeExample('user-input/ts/app/click-me.component.ts', 'click-me-button')(format=".", language="html")
<a id="click"></a> <a id="click"></a>
:marked :marked
The `(click)` to the left of the equal sign identifies the button's click event as the **target of the binding**. The `(click)` to the left of the equal sign identifies the button's click event as the **target of the binding**.
The text within quotes on the right is the **template expression** in which we The text within quotes on the right is the **template statement** in which we
respond to the click event by calling the component's `onClickMe` method. A [template expression](./template-syntax.html#template-expressions) is a subset respond to the click event by calling the component's `onClickMe` method. A [template statement](./template-syntax.html#template-statements) is a subset
of JavaScript with a few added tricks. of JavaScript with restrictions and a few added tricks.
When writing a binding we must be aware of a template expression's **execution context**. When writing a binding we must be aware of a template statement's **execution context**.
The identifiers appearing within an expression belong to a specific context object. The identifiers appearing within an statement belong to a specific context object.
That object is usually the Angular component that controls the template ... which it definitely is That object is usually the Angular component that controls the template ... which it definitely is
in this case because that snippet of HTML belongs to the following component: in this case because that snippet of HTML belongs to the following component:
@ -112,8 +112,8 @@ figure.image-display
Angular only updates the bindings (and therefore the screen) Angular only updates the bindings (and therefore the screen)
if we do something in response to asynchronous events such as keystrokes. if we do something in response to asynchronous events such as keystrokes.
That's why we bind the `keyup` event to an expression that does ... well, nothing. That's why we bind the `keyup` event to an statement that does ... well, nothing.
We're binding to the number 0, the shortest expression we can think of. We're binding to the number 0, the shortest statement we can think of.
That is all it takes to keep Angular happy. We said it would be clever! That is all it takes to keep Angular happy. We said it would be clever!
:marked :marked
That local template variable is intriguing. It's clearly easier to get to the textbox with that That local template variable is intriguing. It's clearly easier to get to the textbox with that
@ -131,14 +131,14 @@ figure.image-display
## Key event filtering (with `key.enter`) ## Key event filtering (with `key.enter`)
Perhaps we don't care about every keystroke. Perhaps we don't care about every keystroke.
Maybe we're only interested in the input box value when the user presses Enter, and we'd like to ignore all other keys. Maybe we're only interested in the input box value when the user presses Enter, and we'd like to ignore all other keys.
When we bind to the `(keyup)` event, our event handling expression hears *every keystroke*. When we bind to the `(keyup)` event, our event handling statement hears *every keystroke*.
We could filter the keys first, examining every `$event.keyCode`, and update the `values` property only if the key is Enter. We could filter the keys first, examining every `$event.keyCode`, and update the `values` property only if the key is Enter.
Angular can filter the key events for us. Angular has a special syntax for keyboard events. Angular can filter the key events for us. Angular has a special syntax for keyboard events.
We can listen for just the Enter key by binding to Angular's `keyup.enter` pseudo-event. We can listen for just the Enter key by binding to Angular's `keyup.enter` pseudo-event.
Only then do we update the component's `values` property. (In this example, Only then do we update the component's `values` property. (In this example,
the update happens inside the event expression. A better practice the update happens inside the event binding statement. A better practice
would be to put the update code in the component.) would be to put the update code in the component.)
+makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-3' ,'app/keyup.components.ts (v3)')(format=".") +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-3' ,'app/keyup.components.ts (v3)')(format=".")
:marked :marked
@ -198,7 +198,7 @@ figure.image-display
Instead, we grab the input box *value* and pass *that* to `addHero`. Instead, we grab the input box *value* and pass *that* to `addHero`.
The component knows nothing about HTML or the DOM, which is the way we like it. The component knows nothing about HTML or the DOM, which is the way we like it.
### Keep template expressions simple ### Keep template statements simple
We bound `(blur)` to *two* JavaScript statements. We bound `(blur)` to *two* JavaScript statements.
We like the first one, which calls `addHero`. We like the first one, which calls `addHero`.
@ -209,7 +209,7 @@ figure.image-display
input box (our design choice). input box (our design choice).
Although the example *works*, we are rightly wary of JavaScript in HTML. Although the example *works*, we are rightly wary of JavaScript in HTML.
Template expressions are powerful. We're supposed to use them responsibly. Template statements are powerful. We're supposed to use them responsibly.
Complex JavaScript in HTML is irresponsible. Complex JavaScript in HTML is irresponsible.
Should we reconsider our reluctance to pass the input box into the component? Should we reconsider our reluctance to pass the input box into the component?