use nameChanged not keyup for input value, format for wrapping

Author: Scott J. Miles

samples/components/tk-binding-to-elements.html

@@ -1,23 +1,26 @@
 <element name="tk-binding-to-elements">
   <template>
-    <p>This is <strong>{{owner}}</strong>'s tk-element but <strong>{{name}}</strong> lets me borrow it. He likes the color <span style="color: {{color}}">{{color}}</span>. I am <strong>{{age}}</strong> years old.</p>
+    <p>This is <strong>{{owner}}</strong>'s tk-element but 
+    <strong>{{name}}</strong> lets me borrow it. 
+    He likes the color <span style="color: {{color}}">{{color}}</span>. 
+    I am <strong>{{age}}</strong> years old.</p>
     <label for="ageInput">Age:</label>
     <input id="ageInput" type="range" value="{{age}}">
     <label for="nameInput">Name:</label>
-    <input id="nameInput" value="{{name}}" on-keyup="processName" placeholder="Your name here...">
+    <input id="nameInput" value="{{name}}" placeholder="Your name here...">
   </template>
   <script>
     Toolkit.register(this, {
-      ready: function() {
-        // Ready to go.
-      },
       age: "25",
       name: "Daniel",
       color: "red",
       owner: "Eric",
-      processName: function(e) {
-        // Do something.
-      },
+      nameChanged: function() {
+        if (this.name) {
+          // ensure capitilization
+          this.name = this.name[0].toUpperCase() +  this.name.slice(1);
+        }
+      }
     });
 </script>
-</element>
+</element>