Merge pull request #32 from nick-woodward/master

Added support for is="dom-bind" allowing for databinding within demo snippet

Author: notwaldorf

demo-snippet.html

@@ -144,7 +144,9 @@
         this._markdown = '```\n' + snippet + '\n' + '```';
 
         // Stamp the template.
-        Polymer.dom(this).appendChild(document.importNode(template.content, true));
+        if (!template.is) {
+          Polymer.dom(this).appendChild(document.importNode(template.content, true));
+        }
       },
 
       _copyToClipboard: function() {

demo/index.html

@@ -75,6 +75,14 @@ <h4>Demo of an element with custom styles</h4>
         <paper-checkbox checked class="red">Checkbox</paper-checkbox>
       </template>
     </demo-snippet>
+
+    <h4>Demo of an element with bindings</h4>
+    <demo-snippet class="centered-demo small-text">
+      <template is="dom-bind">
+        <paper-checkbox checked="[[active]]">One-Way Binding</paper-checkbox>
+        <paper-checkbox checked="{{active}}">Two-Way Binding</paper-checkbox>
+      </template>
+    </demo-snippet>
   </div>
 </body>
 </html>

test/basic.html

@@ -55,6 +55,13 @@
     </template>
   </demo-snippet>
 
+  <demo-snippet id="typeExtensionDemo">
+    <template is="dom-bind">
+      <paper-checkbox checked="{{checked}}"></paper-checkbox>
+      <input value="[[checked]]">
+    </template>
+  </demo-snippet>
+
   <script>
     suite('display', function() {
       var emptyHeight;
@@ -108,6 +115,33 @@
         expect(markdownElement.markdown).to.be.equal(
             '```\n\n<paper-checkbox disabled></paper-checkbox>\n\n```');
       });
+
+      test('elements are only rendered once when using a custom type-extension', function() {
+        var element = document.getElementById('typeExtensionDemo');
+
+        // Render the distributed children.
+        Polymer.dom.flush();
+
+        var inputs = element.querySelectorAll('input');
+        expect(inputs.length).to.be.equal(1);
+      });
+
+      test('can support databinding between elements', function(done) {
+        var element = document.getElementById('typeExtensionDemo');
+        var input = Polymer.dom(element).querySelector('input');
+        var checkbox = Polymer.dom(element).querySelector('paper-checkbox')
+
+        // Render the distributed children.
+        Polymer.dom.flush();
+
+        checkbox.set('checked', true);
+
+        flush(function() {
+          expect(checkbox.checked).to.be.equal(true);
+          expect(input.value).to.be.equal('true');
+          done();
+        });
+      });
     });
 
     suite('parsing', function() {