Troubleshooting up to line 197

Author: kapunahelewong

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

@@ -105,53 +105,49 @@ figure.image-display
   to implement a keystroke loopback in a simple template.
 +makeExample('user-input/ts/app/loop-back.component.ts', 'loop-back-component', 'app/loop-back.component.ts')(format=".")
 :marked
-  We've declared a template reference variable named `box` on the `<input>` element.
-  The `box` variable is a reference to the `<input>` element itself, which means we can
-  grab the input element's `value` and display it
+  The template reference variable named `box`, declared on the `<input>` element,
+  refers to the `<input>` element itself.
+  The code uses the `box` variable to get the input element's `value` and display it
   with interpolation between `<p>` tags.
 
   The template is completely self contained. It doesn't bind to the component,
   and the component does nothing.
 
-  Type in the input box, and watch the display update with each keystroke. *Voila!*
+  Type something in the input box, and watch the display update with each keystroke.
 
 figure.image-display
     img(src='/resources/images/devguide/user-input/keyup-loop-back-anim.gif' alt="loop back")
 .l-sub-section
   :marked
-    **This won't work at all unless we bind to an event**.
-
-    Angular only updates the bindings (and therefore the screen)
-    if we do something in response to asynchronous events such as keystrokes.
-
-    That's why we bind the `keyup` event to a statement that does ... well, nothing.
-    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!
-:marked
-  That template reference variable is intriguing. It's clearly easier to get to the textbox with that
-  variable than to go through the `$event` object. Maybe we can rewrite our previous
-  keyup example so that it uses the variable to get the user's input. Let's give it a try.
+    **This won't work at all unless you bind to an event**.
+
+    Angular updates the bindings (and therefore the screen)
+    only if the app does something in response to asynchronous events, such as keystrokes.
+    This example code binds the `keyup` event
+    to the number 0, the shortest template statement possible. The statement
+    does nothing, but it satisfies Angular's requirement so that Angular will
+    update the screen.
+:marked
+  It's easier to get to the textbox with the template reference
+  variable than to go through the `$event` object. Here's a rewrite of the previous
+  `keyup` example that uses a template reference variable to get the user's input.
 +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-2' ,'app/keyup.components.ts (v2)')(format=".")
 :marked
-  That sure seems easier.
-  An especially nice aspect of this approach is that our component code gets clean data values from the view.
+  A nice aspect of this approach is that the component code gets clean data values from the view.
   It no longer requires knowledge of the `$event` and its structure.
 
 <a id="key-event"></a>
 .l-main-section
 :marked
   ## Key event filtering (with `key.enter`)
-  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.
-  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.
-
-  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.
-
-  Only then do we update the component's `values` property. (In this example,
-  the update happens inside the event binding statement. A better practice
-  would be to put the update code in the component.)
+  Sometimes only the Enter key matters, because it signals that the user has finished typing.
+  But the `(keyup)` event handler hears *every keystroke.*
+  One way to reduce the noise would be to examine every `$event.keyCode` and take action when the key is Enter.
+  But there's an easier way: bind to Angular's `keyup.enter` pseudo-event. With this pseudo-event,
+  Angular calls the event handler only when the user presses Enter.
+
+  In this example, the data binding expression handles the event. It's a better practice
+  to minimize JavaScript in HTML. Move this code to the component.
 +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-3' ,'app/keyup.components.ts (v3)')(format=".")
 :marked
   Here's how it works.
@@ -162,42 +158,40 @@ figure.image-display
 :marked
   ## On blur
 
-  Our previous example won't transfer the current state of the input box if the user mouses away and clicks
-  elsewhere on the page. We update the component's `values` property only when the user presses Enter
-  while the focus is inside the input box.
+  In the previous example, the current state of the input box
+  is lost if the user mouses away and clicks elsewhere on the page
+  without first pressing Enter.
+  The component's `values` property is updated only when the user presses Enter.
 
-  Let's fix that by listening to the input box's blur event as well.
+  To fix this issue, listen to both the Enter key and the blur event.
 
 +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-4' ,'app/keyup.components.ts (v4)')(format=".")
 
 .l-main-section
 :marked
   ## Put it all together
-  We learned how to [display data](./displaying-data.html) in the previous chapter.
-  We've acquired a small arsenal of event binding techniques in this chapter.
+  The previous page showed how to [display data](./displaying-data.html).
+  This page demonstrated event binding techniques.
 
-  Let's put it all together in a micro-app
-  that can display a list of heroes and add new heroes to that list.
-  The user can add a hero by first typing in the input box and then
-  pressing Enter, clicking the Add button, or clicking elsewhere on the page.
+  Now, put it all together in a micro-app
+  that can display a list of heroes and add new heroes to the list.
+  The user can add a hero by typing the hero's name in the input box and
+  clicking **Add**.
 
 figure.image-display
     img(src='/resources/images/devguide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes")
 :marked
   Below is the "Little Tour of Heroes"  component.
-  We'll call out the highlights after we bask briefly in its minimalist glory.
 
 +makeExample('user-input/ts/app/little-tour.component.ts', 'little-tour', 'app/little-tour.component.ts')(format=".")
 :marked
-  We've seen almost everything here before. A few things are new or bear repeating.
-
   ### Use template variables to refer to elements
 
   The `newHero` template variable refers to the `<input>` element.
-  We can use `newHero` from any sibling or child of the `<input>` element.
+  You can use `newHero` from any sibling or child of the `<input>` element.
 
   Getting the element from a template variable makes the button click handler
-  simpler. Without the variable, we'd have to use a fancy CSS selector
+  simpler. Without the variable, the code would have to include a CSS selector
   to find the input element.
 
   ### Pass values, not elements