polymer-body now requires use of a template element inside it.

googlearchive · Mar 24, 2014 · b35efdd · b35efdd
1 parent 4b38cdf
commit b35efdd
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 39 deletions.
diff --git a/src/instance/base.js b/src/instance/base.js
@@ -132,7 +132,7 @@
       }
     },
     // utility function that stamps a <template> into light-dom
-    lightFromTemplate: function(template) {
+    lightFromTemplate: function(template, refNode) {
       if (template) {
         // TODO(sorvell): mark this element as a lightDOMController so that
         // event listeners on bound nodes inside it will be called on it.
@@ -145,14 +145,18 @@
         // e.g. to prevent <img src="images/{{icon}}"> from generating a 404.
         var dom = this.instanceTemplate(template);
         // append to shadow dom
-        this.appendChild(dom);
+        if (refNode) {
+          this.insertBefore(dom, refNode);          
+        } else {
+          this.appendChild(dom);
+        }
         // perform post-construction initialization tasks on ahem, light root
-        this.shadowRootReady(this, template);
+        this.shadowRootReady(this);
         // return the created shadow root
         return dom;
       }
     },
-    shadowRootReady: function(root, template) {
+    shadowRootReady: function(root) {
       // locate nodes with id and store references to them in this.$ hash
       this.marshalNodeReferences(root);
       // set up pointer gestures

diff --git a/src/polymer-body.html b/src/polymer-body.html
@@ -1,32 +1,81 @@
-<polymer-element name="polymer-body" extends="body">
+<!--
+Copyright 2014 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<!--
+/**
+ * @module Polymer
+ */
+/**
+ * The `polymer-body` element extends the body element. It provides a quick and 
+ * easy way to do data binding without the need to setup a custom element 
+ * or template. The body itself serves as the model and controller for the 
+ * elements it contains. Both data and event handlers can be bound. 
+ *
+ * The `polymer-body` element does not create any ShadowDOM. Instead, 
+ * it creates elements in the main document. This makes it convenient to use 
+ * when it's important that elements are not placed inside ShadowDOM.
+ *
+ * The `polymer-body` element provides a subset of the capability you 
+ * get when you define a custom element. When you put data and event listeners
+ * on `polymer-body`, you're customizing an instance of the element.
+ * Because of this you cannot define lifecycle methods like ready. If you need
+ * to do this, make a custom element.
+ * 
+ * Example:
+ *
+ *     <body is="polymer-body">
+ *       <template>
+ *         {{greeting}}
+ *         <button on-tap="buttonTap">Tap me!</button>
+ *       </template>
+ *       <script>
+ *         model.greeting = 'Hello!';
+ *         model.buttonTap = function() {
+ *           console.log('tap!');
+ *         };
+ *       </script>
+ *     </body>
+ *
+ * @status stable
+-->
+<polymer-element name="polymer-body" extends="body" attributes="modelName">
 
   <script>
-
-  // upgrade polymer-body last so that it can contain other imported elements
-  document.addEventListener('polymer-ready', function() {
 
-    Polymer('polymer-body', Platform.mixin({
-
-      created: function() {
-        this.template = document.createElement('template');
-        var body = wrap(document).body;
-        var c$ = body.childNodes.array();
-        for (var i=0, c; (c=c$[i]); i++) {
-          if (c.localName !== 'script') {
-            this.template.content.appendChild(c);
+    /*
+      Normally, it would be required to load polymer-body last to ensure 
+      its contained elements bind properly. However, for convenience, we load
+      `polymer-body` with polymer and register it at `polymer-ready` time.
+      This means that `polymer-body` is ready asynchronous to the 
+      `polymer-ready` event.
+    */
+    // upgrade polymer-body last so that 
+    // 1. it can contain other imported elements without needing to come last
+    // 2. scripts that customize the model are not required to be before
+    // polymer-body is loaded (note: native imports block scripts).
+    document.addEventListener('polymer-ready', function() {
+
+      Polymer('polymer-body', {
+
+        modelName: 'model',
+
+        ready: function() {
+          this.template = document.querySelector('template');
+          var model = window[this.modelName];
+          if (model) {
+            Platform.mixin(this, model);
+          }
+          if (this.template) {
+            this.lightFromTemplate(this.template,
+                this.template.nextElementSibling);
           }
         }
-        // snarf up user defined model
-        window.model = this;
-      },
-
-      parseDeclaration: function(elementElement) {
-        this.lightFromTemplate(this.template);
-      }
 
-    }, window.model));
+      });
 
-  });
+    });
 
   </script>
 

diff --git a/test/html/polymer-body.html b/test/html/polymer-body.html
@@ -1,33 +1,41 @@
 <!doctype html>
 <html>
   <head>
-    <title>async test</title>
+    <title>polymer-body test</title>
     <script src="../../../platform/platform.js"></script>
     <link rel="import" href="../../polymer.html">
     <script src="../../../tools/test/htmltest.js"></script>
     <script src="../../../tools/test/chai/chai.js"></script>
   </head>
   <body is="polymer-body" unresolved>
-    <h2 on-tap="{{eventAction}}">{{greeting}}</h2>
+    <div>top</div>
+
+    <template>
+      <h2 id="h" on-tap="{{eventAction}}">{{greeting}}</h2>
+    </template>
+
+    <div>bottom</div>
+
     <script>
       model = {
-        greeting: 'Hi!',
-        ready: function() {
-          var h = document.body.querySelector('h2');
+        greeting: 'Hi',
+        eventAction: function(e) {
+          e.handled = true;
+        },
+        test: function() {
+          var h = this.$.h;
           chai.assert.equal(h.textContent, this.greeting, 'binding applied');
           var e = this.fire('tap', {}, h);
           chai.assert.isTrue(e.handled, 'element event handler fired');
-          e = this.fire('pointerdown');
-          chai.assert.isTrue(e.handled, 'host event handler fired');
           done();
-        },
-        eventAction: function(e) {
-          e.handled = true;
-        },
-        eventDelegates: {
-          pointerdown: 'eventAction'
         }
       }
+
+      addEventListener('polymer-ready', function() {
+        wrap(document.body).async('test');
+      });
+
     </script>
+
   </body>
 </html>