Merge pull request #1474 from Polymer/0.8-bindable-id

don't trap `id` for marshalling if it's a binding directive + test
Polymer · May 1, 2015 · 8f2ab43 · 8f2ab43
2 parents 3d75b60 + 12513df
commit 8f2ab43
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 16 deletions.
diff --git a/src/lib/annotations/annotations.html b/src/lib/annotations/annotations.html
@@ -89,10 +89,18 @@
           this._parseElementAnnotations(node, list);
     },
 
+    _testEscape: function(value) {
+      var escape = value.slice(0, 2);
+      if (escape === '{{' || escape === '[[') {
+        return escape;
+      }
+    },
+
     // add annotations gleaned from TextNode `node` to `list`
     _parseTextNodeAnnotation: function(node, list) {
-      var v = node.textContent, escape = v.slice(0, 2);
-      if (escape === '{{' || escape === '[[') {
+      var v = node.textContent;
+      var escape = this._testEscape(v);
+      if (escape) {
         // NOTE: use a space here so the textNode remains; some browsers
         // (IE) evacipate an empty textNode.
         node.textContent = ' ';
@@ -242,8 +250,8 @@
     _parseNodeAttributeAnnotations: function(node, annotation) {
       for (var i=node.attributes.length-1, a; (a=node.attributes[i]); i--) {
         var n = a.name, v = a.value;
-        // id
-        if (n === 'id') {
+        // id (unless actually an escaped binding annotation)
+        if (n === 'id' && !this._testEscape(v)) {
           annotation.id = v;
         }
         // events (on-*)
@@ -266,10 +274,12 @@
 
     // construct annotation data from a generic attribute, or undefined
     _parseNodeAttributeAnnotation: function(node, n, v) {
-      var mode = '', escape = v.slice(0, 2), name = n;
-      if (escape === '{{' || escape === '[[') {
+      var escape = this._testEscape(v);
+      if (escape) {
+        // Cache name (`n` will be mangled)
+        var name = n;
         // Mode (one-way or two)
-        mode = escape[0];
+        var mode = escape[0];
         v = v.slice(2, -2);
         // Negate
         var not = false;
@@ -327,5 +337,4 @@
 
   };
 
-
 </script>
diff --git a/test/unit/bind-elements.html b/test/unit/bind-elements.html
@@ -1,5 +1,5 @@
 <template>
-  <div id="boundChild" 
+  <div id="boundChild"
     value="{{value}}"
     negvalue="{{!bool}}"
     attrvalue$="{{attrvalue}}"
@@ -15,6 +15,7 @@
     custom-event-object-value="{{customEventObject.value::change}}">
     Test
     </div>
+    <span id="{{boundId}}"></span>
 </template>
 <script>
   Polymer({
@@ -72,6 +73,10 @@
       customEventObject: {
         type: Object,
         value: function() { return {}; }
+      },
+      boundId: {
+        type: String,
+        value: 'span'
       }
     },
     observers: [
@@ -182,7 +187,7 @@
 </script>
 
 <template>
-  <x-basic id="basic1" 
+  <x-basic id="basic1"
     value="{{boundvalue}}"
     notifyingvalue="{{boundnotifyingvalue}}"
     camel-notifying-value="{{boundnotifyingvalue}}"

diff --git a/test/unit/bind.html b/test/unit/bind.html
@@ -32,6 +32,10 @@
     document.body.removeChild(el);
   });
 
+  test('id is bindable', function() {
+    assert.equal(Polymer.dom(el.root).querySelector('span').id, 'span', 'id bound to <span> not found');
+  });
+
   test('camel-case binding updates', function() {
     el.value = 41;
     assert.equal(el.$.boundChild.camelCase, 41, 'Value not propagated to camelCase property');
@@ -171,12 +175,9 @@
   });
 
   test('annotated dataset attribute binding', function() {
-    // IE10, sigh
-    if (el.dataset) {
-      el.dataSetId = 'yeah';
-      assert.equal(el.$.boundChild.dataset.id, 'yeah', 'dataset.id dataset property not set correctly');
-      assert.equal(el.$.boundChild.getAttribute('data-id'), 'yeah', 'data-id attribute not set correctly');
-    }
+    el.dataSetId = 'yeah';
+    assert.equal(el.$.boundChild.dataset.id, 'yeah', 'dataset.id dataset property not set correctly');
+    assert.equal(el.$.boundChild.getAttribute('data-id'), 'yeah', 'data-id attribute not set correctly');
   });
 
   test('custom notification event to property', function() {