Convert TS text to Dart

Author: kwalrath

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

@@ -6,31 +6,29 @@ include ../../../../_includes/_util-fns
   In this chapter we learn to bind to those events using the Angular
   event binding syntax.
 
-  [Run the live example](/resources/live-examples/user-input/ts/plnkr.html)
-
 :marked
   ## Binding to user input events
 
-  We can use [Angular event bindings](./template-syntax.html#event-binding)
+  We can use Angular event bindings <!-- PENDING: link to ./template-syntax.html#event-binding -->
   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.
   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/dart/lib/click_me_component.dart', 'click-me-button')(format=".", language="html")
 
 <a id="click"></a>
 :marked
   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
-  respond to the click event by calling the component's `onClickMe` method. A [template expression](./template-syntax.html#template-expressions) is a subset
-  of JavaScript with a few added tricks.
+  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
+  of Dart with a few added tricks.
 
   When writing a binding we must be aware of a template expression's **execution context**.
   The identifiers appearing within an expression belong to a specific context object.
   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:
 
-+makeExample('user-input/ts/app/click-me.component.ts', 'click-me-component', 'app/click-me.component.ts')(format=".")
++makeExample('user-input/dart/lib/click_me_component.dart', 'click-me-component', 'web/click_me_component.dart')(format=".")
 :marked
   When the user clicks the button, Angular calls the component's `onClickMe` method.
 
@@ -41,12 +39,22 @@ include ../../../../_includes/_util-fns
   what the user types back onto the screen.
 
   This time we'll (1) listen to an event and (2) grab the user's input.
-+makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-1-template', 'app/keyup.components.ts (template v.1)')(format=".")
++makeExample('user-input/dart/lib/keyup_components.dart', 'key-up-component-1-template', 'web/keyup_components.dart (template v.1)')(format=".")
+
 :marked
   Angular makes an event object available in the **`$event`** variable,
   which we pass to the component's `onKey()` method.
   The user data we want is in that variable somewhere.
-+makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-1-class-no-type', 'app/keyup.components.ts (class v.1)')(format=".")
+
+important
+.callout.is-important
+  header $event vs. \$event
+  :marked
+    Templates in Dart files need a `\` in front of the `$`.
+    If the template is in an HTML file, use `$event` instead of `\$event`.
+
++makeExample('user-input/dart/lib/keyup_components.dart', 'key-up-component-1-class-no-type', 'web/keyup_components.dart (class v.1)')(format=".")
+
 :marked
   The shape of the `$event` object is determined by whatever raises the event.
   The `keyup` event comes from the DOM, so `$event` must be a [standard DOM event object](https://developer.mozilla.org/en-US/docs/Web/API/Event).
@@ -56,7 +64,7 @@ include ../../../../_includes/_util-fns
 
   The `onKey()` component method is where we extract the user's input
   from the event object, adding that input to the list of user data that we're accumulating in the component's `values` property.
-  We then use [interpolation](./template-syntax.html#interpolation)
+  We then use interpolation <!-- PENDING: link to ./template-syntax.html#interpolation) -->
   to display the accumulating `values` property back on screen.
 
   Enter the letters "abc", and then backspace to remove them.
@@ -70,9 +78,9 @@ figure.image-display
 .l-sub-section
   :marked
     We cast the `$event` as an `any` type, which means we've abandoned strong typing
-    to simplify our code. We generally prefer the strong typing that TypeScript affords.
+    to simplify our code. We generally prefer the strong typing that Dart affords.
     We can rewrite the method, casting to HTML DOM objects like this.
-  +makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-1-class', 'app/keyup.components.ts (class v.1 - strongly typed )')(format=".")
+  +makeExample('user-input/dart/lib/keyup_components.dart', 'key-up-component-1-class', 'web/keyup_components.dart (class v.1 - strongly typed )')(format=".")
   :marked
     <br>Strong typing reveals a serious problem with passing a DOM event into the method:
     too much awareness of template details, too little separation of concerns.
@@ -85,13 +93,14 @@ figure.image-display
   ## Get user input from a local template variable
   There's another way to get the user data without the `$event` variable.
 
-  Angular has a syntax feature called [**local template variables**](./template-syntax.html#local-vars).
+  Angular has a syntax feature called **local template variables**.
+  <!-- PENDING: link to ./template-syntax.html#local-vars) -->
   These variables grant us direct access to an element.
   We declare a local template variable by preceding an identifier with a hash/pound character (#).
 
   Here's an example of using a local template variable
   to implement a clever keystroke loopback in an ultra-simple template.
-+makeExample('user-input/ts/app/loop-back.component.ts', 'loop-back-component', 'app/loop-back.component.ts')(format=".")
++makeExample('user-input/dart/lib/loop_back_component.dart', 'loop-back-component', 'web/loop_back_component.dart')(format=".")
 :marked
   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
@@ -119,7 +128,7 @@ figure.image-display
   That local template 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.
-+makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-2' ,'app/keyup.components.ts (v2)')(format=".")
++makeExample('user-input/dart/lib/keyup_components.dart', 'key-up-component-2' ,'web/keyup_components.dart (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.
@@ -140,7 +149,7 @@ figure.image-display
   Only then do we update the component's `values` property. (In this example,
   the update happens inside the event expression. A better practice
   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/dart/lib/keyup_components.dart', 'key-up-component-3' ,'web/keyup_components.dart (v3)')(format=".")
 :marked
   Here's how it works.
 figure.image-display
@@ -156,7 +165,7 @@ figure.image-display
 
   Let's fix that by listening to the input box's blur event as well.
 
-+makeExample('user-input/ts/app/keyup.components.ts', 'key-up-component-4' ,'app/keyup.components.ts (v4)')(format=".")
++makeExample('user-input/dart/lib/keyup_components.dart', 'key-up-component-4' ,'web/keyup_components.dart (v4)')(format=".")
 
 .l-main-section
 :marked
@@ -175,7 +184,7 @@ figure.image-display
   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=".")
++makeExample('user-input/dart/lib/little_tour_component.dart', 'little-tour', 'web/little_tour_component.dart')(format=".")
 :marked
   We've seen almost everything here before. A few things are new or bear repeating.
 
@@ -199,7 +208,7 @@ figure.image-display
   The component knows nothing about HTML or the DOM, which is the way we like it.
 
   ### Keep template expressions simple
-  We bound `(blur)` to *two* JavaScript statements.
+  We bound `(blur)` to *two* Dart statements.
 
   We like the first one, which calls `addHero`.
   We do not like the second one, which assigns an empty string to the input box value.
@@ -208,9 +217,9 @@ figure.image-display
   The component has no way to do that itself because it has no access to the
   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 Dart in HTML.
   Template expressions are powerful. We're supposed to use them responsibly.
-  Complex JavaScript in HTML is irresponsible.
+  Complex Dart in HTML is irresponsible.
 
   Should we reconsider our reluctance to pass the input box into the component?
 
@@ -221,15 +230,15 @@ figure.image-display
 
   Here is all the code we talked about in this chapter.
 +makeTabs(`
-  user-input/ts/app/click-me.component.ts,
-  user-input/ts/app/keyup.components.ts,
-  user-input/ts/app/loop-back.component.ts,
-  user-input/ts/app/little-tour.component.ts
+  user-input/dart/lib/click_me_component.dart,
+  user-input/dart/lib/keyup_components.dart,
+  user-input/dart/lib/loop_back_component.dart,
+  user-input/dart/lib/little_tour_component.dart
   `,'',
-  `click-me.component.ts,
-  keyup.components.ts,
-  loop-back.component.ts,
-  little-tour.component.ts`)
+  `click_me_component.dart,
+  keyup_components.dart,
+  loop_back_component.dart,
+  little_tour_component.dart`)
 
 .l-main-section
 :marked