docs(template-syntax): sample/devmode fix + text updates

closes #692

Author: wardbell

public/docs/_examples/template-syntax/ts/app/app.component.html

@@ -255,7 +255,10 @@ <h3>
 <div>
 <!-- #docregion event-binding-3 -->
 <!-- `myClick` is an event on the custom `MyClickDirective` -->
+
+<!-- #docregion my-click -->
 <div myClick (myClick)="clickity=$event">click with myClick</div>
+<!-- #enddocregion my-click -->
 <!-- #enddocregion event-binding-3 -->
 {{clickity}}
 </div>
@@ -382,8 +385,8 @@ <h3>Use setStyles2() - camelCase style property names</h3>
   This div is italic, normal weight, and x-large
 </div>
 <!-- #enddocregion NgStyle-3 -->
-<div [ngStyle]="setStyles2()" #styleDiv>
-  After setStyles2(), the styles are "{{getStyles(styleDiv)}}"
+<div [ngStyle]="setStyles2()" #styleDiv2>
+  After setStyles2(), the styles are "{{getStyles(styleDiv2)}}"
 </div>
 
 <!-- not used in chapter -->
@@ -445,15 +448,15 @@ <h3>Use setStyles2() - camelCase style property names</h3>
 <div class="toe">
   <div *ngIf="!toeChoice">Pick a toe</div>
   <div *ngIf="toeChoice">You picked
-    <!-- #docregion NgSwitch -->      
+    <!-- #docregion NgSwitch -->
     <span [ngSwitch]="toeChoice">
       <template [ngSwitchWhen]="'Eenie'">Eenie</template>
       <template [ngSwitchWhen]="'Meanie'">Meanie</template>
       <template [ngSwitchWhen]="'Miney'">Miney</template>
       <template [ngSwitchWhen]="'Moe'">Moe</template>
       <template ngSwitchDefault>Other</template>
     </span>
-    <!-- #enddocregion NgSwitch -->    
+    <!-- #enddocregion NgSwitch -->
   </div>
 
 </div>
@@ -477,8 +480,8 @@ <h3>Use setStyles2() - camelCase style property names</h3>
 <br>
 
 <div class="box">
-  <!-- Ex: 1 - Hercules Son of Zeus -->
   <!-- #docregion NgFor-3 -->
+  <!-- Ex: 1 - Hercules Son of Zeus -->
   <div *ngFor="#hero of heroes, #i=index">{{i + 1}} - {{hero.fullName}}</div>
   <!-- #enddocregion NgFor-3 -->
 </div>

public/docs/_examples/template-syntax/ts/app/app.component.ts

@@ -1,3 +1,5 @@
+//#docplaster
+
 import {Component} from 'angular2/core';
 import {NgForm} from 'angular2/common';
 
@@ -37,6 +39,11 @@ export class AppComponent {
 
   currentHero = Hero.MockHeroes[0];
 
+  // DevMode memoization fields
+  private _priorClasses:{};
+  private _priorStyles:{};
+  private _priorStyles2:{};
+
   getStyles(el:Element){
     let styles = window.getComputedStyle(el);
     let showStyles = {};
@@ -100,36 +107,61 @@ export class AppComponent {
 
   // #docregion setClasses
   setClasses() {
-    return {
+    let classes =  {
       saveable: this.canSave,      // true
       modified: !this.isUnchanged, // false
       special: this.isSpecial,     // true
     }
+    // #enddocregion setClasses
+    // compensate for DevMode (sigh)
+    if (JSON.stringify(classes) === JSON.stringify(this._priorClasses)){
+       return this._priorClasses;
+    }
+    this._priorClasses = classes;
+    // #docregion setClasses
+    return classes;
   }
   // #enddocregion setClasses
 
+
   // #docregion setStyles
   setStyles() {
-    return {
+    let styles = {
       // CSS property names
       'font-style':  this.canSave      ? 'italic' : 'normal',  // italic
       'font-weight': !this.isUnchanged ? 'bold'   : 'normal',  // normal
       'font-size':   this.isSpecial    ? 'x-large': 'smaller', // larger
     }
+    // #enddocregion setStyles
+    // compensate for DevMode (sigh)
+    if (JSON.stringify(styles) === JSON.stringify(this._priorStyles)){
+       return this._priorStyles;
+    }
+    this._priorStyles = styles;
+    // #docregion setStyles
+    return styles;
   }
   // #enddocregion setStyles
- 
+
   // #docregion setStyles2
   setStyles2() {
-    return {
+    let styles = {
       // camelCase style properties work too
       fontStyle:  this.canSave      ? 'italic' : 'normal',  // italic
       fontWeight: !this.isUnchanged ? 'bold'   : 'normal',  // normal
       fontSize:   this.isSpecial    ? 'x-large': 'smaller', // larger
     }
+    // #enddocregion setStyles2
+    // compensate for DevMode (sigh)
+    if (JSON.stringify(styles) === JSON.stringify(this._priorStyles2)){
+       return this._priorStyles2;
+    }
+    this._priorStyles2 = styles;
+    // #docregion setStyles2
+    return styles;
   }
   // #enddocregion setStyles2
-  
+
   toeChoice = '';
   toeChooser(picker:HTMLFieldSetElement){
     let choices = picker.children;

public/docs/_examples/template-syntax/ts/app/my-click.directive.ts

@@ -1,7 +1,7 @@
 // #docplaster
 import {Directive,  Output, ElementRef, EventEmitter} from 'angular2/core';
 
-@Directive({selector:'[mClick]'})
+@Directive({selector:'[myClick]'})
 export class MyClickDirective {
   // #docregion my-click-output-1
   @Output('myClick') clicks = new EventEmitter<string>();