add 'domReady' method. This method can be used to access elements in …

…dom (descendants, ancestors, siblings) such that the developer is inured to upgrade ordering. If the element definitions have loaded, domReady can be used to access upgraded elements.
googlearchive · Feb 19, 2014 · 1b94222 · 1b94222
1 parent 19f854e
commit 1b94222
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 0 deletions.
diff --git a/src/instance/base.js b/src/instance/base.js
@@ -64,6 +64,16 @@
       if (this.enteredView) {
         this.enteredView();
       }
+      // NOTE: domReady can be used to access elements in dom (descendants, 
+      // ancestors, siblings) such that the developer is enured to upgrade
+      // ordering. If the element definitions have loaded, domReady
+      // can be used to access upgraded elements.
+      if (!this.hasBeenAttached) {
+        this.hasBeenAttached = true;
+        if (this.domReady) {
+          this.async('domReady');
+        }
+      }
     },
     detachedCallback: function() {
       if (!this.preventDispose) {

diff --git a/test/html/ctor.html b/test/html/ctor.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+  <head>
+    <title>constructor 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>
+
+    <x-foo></x-foo>
+    <x-bar></x-bar>
+
+    <polymer-element name="x-foo" constructor="XFoo">
+      <template>
+        I am x-foo.
+      </template>
+      <script>
+      (function() {
+        var nog = function() {};
+
+        Polymer('x-foo', {
+          created: function() {
+            chai.assert.isTrue(this instanceof
+                Object.getPrototypeOf(this).constructor);
+          },
+          domReady: function() {
+            chai.assert.isDefined(window.XFoo, 'constructor is undefined');
+            chai.assert.isTrue(CustomElements.instanceof(this, XFoo), 'instanceof failed');
+            chai.assert.isFalse(CustomElements.instanceof(this, nog), 'instanceof bugus base succeeded');
+          }
+        });
+      })();
+      </script>
+    </polymer-element>
+
+    <polymer-element name="x-bar" extends="x-foo" constructor="XBar">
+      <template>
+        I am x-bar.
+      </template>
+      <script>
+        Polymer('x-bar', {
+          created: function() {
+            this.super();
+            chai.assert.isTrue(this instanceof
+                Object.getPrototypeOf(this).constructor);
+          },
+          domReady: function() {
+            this.super();
+            chai.assert.isDefined(window.XBar, 'constructor is undefined');
+            //chai.assert.isTrue(this.impl instanceof XBar, 'instanceof failed');
+            chai.assert.isTrue(CustomElements.instanceof(this, XBar), 'instanceof failed');
+            done();
+          }
+        });
+      </script>
+    </polymer-element>
+  </body>
+</html>
diff --git a/test/html/domready.html b/test/html/domready.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+  <head>
+    <title>domReady 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>
+
+    <x-bar></x-bar>
+    <x-foo>
+      <x-bar></x-bar>
+    </x-foo>
+    <x-bar></x-bar>
+
+    <polymer-element name="x-foo">
+      <template>
+        I am x-foo.
+      </template>
+      <script>
+        Polymer('x-foo', {
+          fooish: true,
+          domReady: function() {
+            chai.assert.isTrue(this.firstElementChild.isBar, 'child is not upgraded');
+            chai.assert.isTrue(this.previousElementSibling.isBar, 'sibling is not upgraded');
+            chai.assert.isTrue(this.nextElementSibling.isBar, 'sibling is not upgraded');
+            done();
+          }
+        });
+      </script>
+    </polymer-element>
+
+    <polymer-element name="x-bar">
+      <template>
+        I am x-bar.
+      </template>
+      <script>
+        Polymer('x-bar', {
+          isBar: true
+        });
+      </script>
+  </body>
+</html>
diff --git a/test/js/register.js b/test/js/register.js
@@ -52,4 +52,6 @@ htmlSuite('element registration', function() {
   htmlTest('html/element-registration.html');
   htmlTest('html/element-import.html');
   htmlTest('html/polymer-body.html');
+  htmlTest('html/ctor.html');
+  htmlTest('html/domready.html');
 });