Add two way data binding.

sky/examples/widgets/index.sky

Index: sky/examples/widgets/index.sky
diff --git a/sky/examples/widgets/index.sky b/sky/examples/widgets/index.sky
index d4e55c0d1082b62a3a33a4acdf95a78270cd3f37..98b0ab47a4d024f4db2932851d460990c281e415 100644
--- a/sky/examples/widgets/index.sky
+++ b/sky/examples/widgets/index.sky
@@ -25,7 +25,10 @@
   }
   </style>
 
-  <sky-input id="text" value="Ready" />
+  <sky-box title='Text'>
+    <sky-input id="text" value="{{ inputValue }}" />
+    <div>value = {{ inputValue }}</div>
+  </sky-box>
 
   <sky-box title='Buttons'>
     <sky-button id='button' on-click='handleClick'>Button</sky-button>
@@ -37,7 +40,8 @@
     <div><sky-checkbox id='checkbox' />Checkbox</div>
     <div class="output">highlight: {{ myCheckbox.highlight }}</div>
     <div class="output">checked: {{ myCheckbox.checked }}</div>
-    <div><sky-checkbox id='checkbox' checked='true'/>Checkbox, default checked.</div>
+    <div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox, default checked.</div>
+    <div class="output">checked: {{ checked }}</div>
   </sky-box>
 
   <sky-box title='Radios'>
@@ -61,6 +65,8 @@ module.exports = class extends SkyElement {
     this.myCheckbox = null;
     this.myText = null;
     this.clickCount = 0;
+    this.inputValue = "Ready";
+    this.checked = false;
   }
   attached() {
     this.myButton = this.shadowRoot.getElementById('button');
@@ -70,7 +76,8 @@ module.exports = class extends SkyElement {
   }
   handleClick(event) {
     this.clickCount++;
-    this.myText.value = "Moar clicking " + this.clickCount;
+    this.checked = !this.checked;
+    this.inputValue = "Moar clicking " + this.clickCount;
   }
 }.register();
 </script>