Add two way data binding.

sky/examples/widgets/index.sky

 <!--
 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
 <sky>
 <import src="/sky/framework/sky-box/sky-box.sky"/>
 <import src="/sky/framework/sky-button/sky-button.sky"/>
 <import src="/sky/framework/sky-checkbox/sky-checkbox.sky"/>
 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement"/>
 <import src="/sky/framework/sky-input.sky"/>
 <import src="/sky/framework/sky-radio/sky-radio.sky"/>
 <sky-element name="widget-root">
 <template>
   <style>
   div {
     display: flex;
     align-items: center;
   }
   sky-checkbox {
     margin: 5px;
   }
   .output {
     margin-left: 48px;
   }
   </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>
     <div>highlight: {{ myButton.highlight }}</div>
     <div>clickCount: {{ clickCount }}</div>
   </sky-box>
 
   <sky-box title='Checkboxes'>
     <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'>
     <sky-box title='Group One'>
       <div><sky-radio group='foo'/>one</div>
       <div><sky-radio group='foo' selected='true' />two</div>
       <div><sky-radio group='foo'/>three</div>
     </sky-box>
     <sky-box title='Group Two'>
       <div><sky-radio group='bar'/>A</div>
       <div><sky-radio group='bar'/>B</div>
       <div><sky-radio group='bar' selected='true' />C</div>
     </sky-box>
   </sky-box>
 
 </template>
 <script>
 module.exports = class extends SkyElement {
   created() {
     this.myButton = null;
     this.myCheckbox = null;
     this.myText = null;
     this.clickCount = 0;
+    this.inputValue = "Ready";
+    this.checked = false;
   }
   attached() {
     this.myButton = this.shadowRoot.getElementById('button');
     this.myCheckbox = this.shadowRoot.getElementById('checkbox');
     this.myText = this.shadowRoot.getElementById('text');
     this.clickCount = 0;
   }
   handleClick(event) {
     this.clickCount++;
-    this.myText.value = "Moar clicking " + this.clickCount;
+    this.checked = !this.checked;
+    this.inputValue = "Moar clicking " + this.clickCount;
   }
 }.register();
 </script>
 </sky-element>
 
 <widget-root />
 </sky>