Fix for #153. The process of putting template content into shadowRoot…

… is now: 1. create instance of template content 2. bind it 3. append to shadowRoot Previously it was 1, 3, 2 which could lead to attribute values having values with {{}} in them while being in dom. This can create issues like images loading with incorrect urls.
Polymer · May 22, 2013 · bd0bd6e · bd0bd6e
1 parent cf10031
commit bd0bd6e
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 10 deletions.
diff --git a/src/register.js b/src/register.js
@@ -77,12 +77,12 @@
       // TODO(sorvell): host not set per spec; we set it for convenience
       // so we can traverse from root to host.
       root.host = this;
-      //root.appendChild(templateContent(template).cloneNode(true));
-      root.appendChild(template.createInstance());
-      // set up gestures
-      PointerGestures.register(root);
-      PointerEventsPolyfill.setTouchAction(root, 
-          this.getAttribute('touch-action'));
+      var templateInstance = template.createInstance();
+      // parse and apply MDV bindings
+      // do this before being inserted to avoid {{}} in attribute values
+      // e.g. to prevent <img src="images/{{icon}}"> from generating a 404.
+      Polymer.bindModel.call(this, templateInstance);
+      root.appendChild(templateInstance);
       rootCreated.call(this, root);
       return root;
     }
@@ -92,16 +92,16 @@
     // to resolve this node synchronously we must process CustomElements 
     // in the subtree immediately
     CustomElements.takeRecords();
-    // upgrade elements in shadow root
-    //document.upgradeElements(inRoot);
-    //document.watchDOM(inRoot);
     // parse and apply MDV bindings
-    Polymer.bindModel.call(this, inRoot);
     // locate nodes with id and store references to them in this.$ hash
     Polymer.marshalNodeReferences.call(this, inRoot);
     // add local events of interest...
     var rootEvents = Polymer.accumulateEvents(inRoot);
     Polymer.bindAccumulatedLocalEvents.call(this, inRoot, rootEvents);
+    // set up gestures
+    PointerGestures.register(inRoot);
+    PointerEventsPolyfill.setTouchAction(inRoot,
+        this.getAttribute('touch-action'));
   };
 
   function instanceReady(inElement) {

diff --git a/test/html/attr-mustache.html b/test/html/attr-mustache.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+  <head>
+    <title>attribute mustaches</title>
+    <script src="../../polymer.js"></script>
+    <script src="../../tools/test/htmltest.js"></script>
+    <script src="../../node_modules/chai/chai.js"></script>
+  </head>
+  <body>
+    <x-test id="test"></x-test>
+    <element name="x-target" attributes="src">
+      <script>
+        Polymer.register(this, {
+          // force an mdv binding
+          bind: function() {
+            Element.prototype.bind.apply(this, arguments);
+          },
+          insertedCallback: function() {
+            this.testSrcForMustache();
+          },
+          attributeChangedCallback: function(name, oldValue) {
+            this.testSrcForMustache();
+            if (this.getAttribute(name) === '../testSource') {
+              done();
+            }
+          },
+          testSrcForMustache: function() {
+            chai.assert.notMatch(this.getAttribute('src'), Polymer.bindPattern,
+              'attribute does not contain {{...}}');
+          }
+        });
+      </script>
+    </element>
+
+    <element name="x-test">
+      <template>
+        <x-target id="target" src="../{{src}}"></x-target>
+      </template>
+      <script>
+        Polymer.register(this, {
+          src: 'testSource'
+        });
+      </script>
+    </element>
+  </body>
+</html>