(docs) devguide - update user-input jade to use template-syntax example code

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

@@ -1,3 +1,5 @@
+include ../../../../_includes/_util-fns
+
 :markdown
   When the user clicks a link, pushes a button, or types on the keyboard
   we want to know about it. These user actions all raise DOM events.
@@ -11,9 +13,8 @@
   
   The syntax is simple. We assign a template expression to the DOM event name, surrounded in parentheses. 
   A click Event Binding makes for a quick illustration.
-  
++makeExample('template-syntax/ts/src/app/app.html', 'click-me-button')(format=".")
-code-example(language="html" ).
+
-  <button (click)="onClickMe()">Click me</button>
 :markdown
   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
@@ -27,17 +28,8 @@ code-example(language="html" ).
   <!--
   These sample can be found in http://plnkr.co/edit/mr63T5
   -->
-  ```
++makeExample('template-syntax/ts/src/app/app.ts', 'click-me-component')
-  @Component({
+:markdown
-    selector: 'click-me',
-    template: '<button (click)="onClickMe()">Click me</button>'
-  })
-  class ClickMeComponent {
-    onClickMe(){
-      alert('You are my hero!')    
-    }
-  }
-  ```
   The `onClickMe` in the template refers to the `onClickMe` method of the component. 
   When the user clicks the button, Angular calls the component's `onClickMe` method.
 
@@ -48,21 +40,7 @@ code-example(language="html" ).
   what the user types back onto the screen.
   
   This time we'll both listen to an event and grab the user's input.
-code-example(format="linenums" language="html" ).
++makeExample('template-syntax/ts/src/app/app.ts', 'key-up-component')
-  @Component({
-    selector: 'key-up',
-    template: `
-      &lt;h4>Give me some keys!&lt;/h4>
-      &lt;div>&lt;input (keyup)="onKey($event)">&lt;div>
-      &lt;div>{{values}}&lt;/div>
-    `
-  })
-  class KeyUpComponent {
-    values='';
-    onKey(event) {
-      this.values += event.target.value + ' | ';  
-    }
-  }
 :markdown
   Angular makes an event object available in the **`$event`** variable. The user data we want is in that variable somewhere.
   
@@ -94,15 +72,7 @@ code-example().
   
   Let's demonstrate with  a clever keystroke loopback in a single line of template HTML. 
   We don't actually need a dedicated component to do this but we'll make one anyway.
-  
++makeExample('template-syntax/ts/src/app/app.ts', 'loop-back-component')
-code-example(format="linenums" language="html" ).
-  @Component({
-    selector: 'loop-back',
-    template: `&lt;input #box (keyup)="0"> &lt;p>{{box.value}}&lt;/p>`
-  })
-  class LoopbackComponent {
-  }
-
 :markdown
   We've declared a template local variable named `box` on the `<input>` element.
   The `box` variable is a reference to the `<input>` element itself which means we can 
@@ -120,29 +90,34 @@ code-example(format="linenums" language="html" ).
   
   That local template variable is intriguing. It's clearly easer to get to the textbox with that
   variable than to go through the `$event` object. Maybe we can re-write our previous
-  example using the variable to acquire the user's' input. Let's give it a try.
+  "key-up" example using the variable to acquire the user's' input. Let's give it a try.
-code-example(format="linenums" language="html" ).
++makeExample('template-syntax/ts/src/app/app.ts', 'key-up2-component')
-  @Component({
-    selector: 'key-up2',
-    template: `
-      &lt;h4>Give me some more keys!&lt;/h4>
-      &lt;div>&lt;input #box (keyup)="onKey(box.value)">&lt;div>
-      &lt;div>{{values}}&lt;/div>
-    `
-  })
-  class KeyUpComponentV2 {
-    values='';
-    onKey(value) {
-      this.values += value + ' | ';  
-    }
-  }
 :markdown
   That sure seems easier. 
   An especially nice aspect of this approach is that our 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
+:markdown
+  ## Key event filtering (with `key.enter`)
+  Perhaps we don't care about every keystroke. 
+  We're only interested in the input box value when the user hits the "Enter" key. We'd like to ignore all other keys.
+  When we bind to the `(keyup)` event, our event handling expression hears *every key stroke*. 
+  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 ... 
+  inside the event expression rather than in the component ... 
+  because we can ... even if it is a dubious practice.
++makeExample('template-syntax/ts/src/app/app.ts', 'key-up3-component')
+.alert.is-helpful
+  :markdown
+    We won't transfer the current state of the input box if the user mouses away or clicks
+    elsewhere on the page. We only update the component's `values` property when the user presses "Enter"
+    inside the input box.
 .l-main-section
 :markdown
   ## Put it all together
@@ -160,33 +135,7 @@ figure.image-display
   <!--
   This example in http://plnkr.co/edit/JWeIqq
   -->
-code-example(format="linenums" language="html" ). 
++makeExample('template-syntax/ts/src/app/app.ts', 'little-tour-of-heroes-app')  
-  import {bootstrap, Component CORE_DIRECTIVES} from 'angular2/core'
-    
-  @Component({
-    selector: 'little-tour',
-    template: `
-      &lt;h4>Little Tour of Heroes&lt;/h4>
-      &lt;input #new-hero (keyup.enter)="addHero(newHero)">
-      &lt;button (click)=addHero(newHero)>Add&lt;/button>
-      &lt;ul>&lt;li *ng-for="#hero of heroes">{{hero}}&lt;/li>&lt;/ul>
-      &lt;div>There are so many heroes!&lt;/div>
-    `,
-    directives: [CORE_DIRECTIVES]
-  })
-  class LittleTour {
-    heroes=['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
-        
-    addHero(newHero) {
-      if (newHero.value) { 
-        this.heroes.push(newHero.value); 
-        newHero.value = null; // clear the newHero textbox
-      }
-    }
-  }
-  
-  bootstrap(LittleTour);
-  
 :markdown
   We've seen almost everything here before. A few things are new or bear repeating.
   
@@ -195,19 +144,15 @@ code-example(format="linenums" language="html" ).
   
   Unfortunately, we can't use that name when we declare the variable with (#). 
   The browser forces all attribute and element names to lowercase, turning what would be `#newHero`
-  into `#newhero`. We don't want a `newhero` variable name in our template expressions. 
+  into `#newhero` (all lowercase). We don't want a `newhero` variable name in our template expressions. 
-  The Angular workaround is to spell the declaration in "snake case". When Angular encounters "#new-hero",it translates
-  that to `newHero` for template expressions ... which is exactly what we want.
   
-  ### **keyup.enter - a KeyEvent filter** 
+  The Angular workaround is to spell the declaration in "snake case". Angular translates "#new-hero" 
-  We'll add a hero name when the user clicks the "Add" button or hits the enter key. We ignore all other keys.
+  to `newHero` for template expressions ... which is exactly what we want.
-  If we bind to `(keyup)` our event handling expression hears every key event. We'd have to
-  examine every `$event.keyCode` and respond only if the value is "Enter".
   
-  Angular can filter the key events for us. Angular has a special syntax for keyboard events. 
+  ### **keyup.enter filter** 
-  We can listen for just the "enter" key by binding to Angular's `keyup.enter` pseudo-event. 
+  We'll add a hero when the user clicks the "Add" button or hits the "Enter" key. We ignore all other keys.
-  Then either the `keyup.enter` or the button click event
+  We accept that we might lose the new hero if the user clicks elsewhere or leaves the page
-  can invoke the component's `addHero` method.
+  without having hit "Enter" or the "Add" button first. Let's hope the users don't complain.
 
   ### **newHero refers to the `<input>` element**
   We can access the `newHero` variable from any sibling or child of the `<input>` element.