From ece409f4cc723a779e9f225965a974e4d5a538e2 Mon Sep 17 00:00:00 2001
From: John Messerly <jmesserly@google.com>
Date: Tue, 15 Oct 2013 14:32:20 -0700
Subject: [PATCH] fix reflectPropertyToAttribute name, fix Node.bind to pass
 the property name to it (not attribute name), add test

---
 src/instance/attributes.js               | 10 ++---
 src/instance/mdv.js                      | 16 +++----
 src/instance/properties.js               |  6 +--
 test/html/prop-attr-bind-reflection.html | 54 ++++++++++++++++++++++++
 test/js/bindMDV.js                       |  9 ++--
 5 files changed, 75 insertions(+), 20 deletions(-)
 create mode 100644 test/html/prop-attr-bind-reflection.html

diff --git a/src/instance/attributes.js b/src/instance/attributes.js
index a5d6ad497c..269be25868 100644
--- a/src/instance/attributes.js
+++ b/src/instance/attributes.js
@@ -68,7 +68,7 @@
         return value;
       }
     },
-    relectPropertyToAttribute: function(name) {
+    reflectPropertyToAttribute: function(name) {
       //if (Object.keys(this[PUBLISHED]).indexOf(name) >= 0) {
         // TODO(sjmiles): consider memoizing this
         var inferredType = typeof this.__proto__[name];
@@ -77,10 +77,10 @@
         // boolean properties must reflect as boolean attributes
         if (serializedValue !== undefined) {
           this.setAttribute(name, serializedValue);
-          // TODO(sorvell): we should remove attr for all properties 
-          // that have undefined serialization; however, we will need to 
+          // TODO(sorvell): we should remove attr for all properties
+          // that have undefined serialization; however, we will need to
           // refine the attr reflection system to achieve this; pica, for example,
-          // relies on having inferredType object properties not removed as 
+          // relies on having inferredType object properties not removed as
           // attrs.
         } else if (inferredType === 'boolean') {
           this.removeAttribute(name);
@@ -92,5 +92,5 @@
   // exports
 
   scope.api.instance.attributes = attributes;
-  
+
 })(Polymer);
diff --git a/src/instance/mdv.js b/src/instance/mdv.js
index 09e931e50e..eb8798e6cf 100644
--- a/src/instance/mdv.js
+++ b/src/instance/mdv.js
@@ -10,7 +10,7 @@
   var log = window.logFlags || 0;
 
   // use an MDV syntax
-    
+
   var mdv_syntax = new PolymerExpressions();
 
   // element api supporting mdv
@@ -35,7 +35,7 @@
         // reflect bound property to attribute when binding
         // to ensure binding is not left on attribute if property
         // does not update due to not changing.
-        this.relectPropertyToAttribute(name);
+        this.reflectPropertyToAttribute(property);
         return this.bindings[name] = observer;
       } else {
         return this.super(arguments);
@@ -50,7 +50,7 @@
     unbindAll: function() {
       if (!this._unbound) {
         this.unbindAllProperties();
-        this.super(); 
+        this.super();
         // unbind shadowRoot
         var root = this.shadowRoot;
         while (root) {
@@ -84,11 +84,11 @@
   function unbindNodeTree(node) {
     forNodeTree(node, _nodeUnbindAll);
   }
-  
+
   function _nodeUnbindAll(node) {
     node.unbindAll();
   }
-  
+
   function forNodeTree(node, callback) {
     if (node) {
       callback(node);
@@ -97,12 +97,12 @@
       }
     }
   }
-  
+
   var mustachePattern = /\{\{([^{}]*)}}/;
-   
+
   // exports
 
   scope.bindPattern = mustachePattern;
   scope.api.instance.mdv = mdv;
-  
+
 })(Polymer);
diff --git a/src/instance/properties.js b/src/instance/properties.js
index 275d28a1d1..3787cc82fa 100644
--- a/src/instance/properties.js
+++ b/src/instance/properties.js
@@ -54,7 +54,7 @@
       // construct an observer on 'name' that ...
       this._observe(name, function() {
         // reflects the value to an attribute
-        self.relectPropertyToAttribute(name);
+        self.reflectPropertyToAttribute(name);
       });
     },
     observeProperty: function(name, methodName) {
@@ -72,7 +72,7 @@
       // construct an observer on 'name' that ...
       this._observe(name, function(value, old) {
         // reflects the value to an attribute
-        self.relectPropertyToAttribute(name);
+        self.reflectPropertyToAttribute(name);
         // observes the value if it is an array
         self.observeArrayValue(name, value, old);
         // invokes user's side-effect method
@@ -150,7 +150,7 @@
     }
   };
 
-  
+
   // property binding
 
   // bind a property in A to a path in B by converting A[property] to a
diff --git a/test/html/prop-attr-bind-reflection.html b/test/html/prop-attr-bind-reflection.html
new file mode 100644
index 0000000000..5e6f5717ce
--- /dev/null
+++ b/test/html/prop-attr-bind-reflection.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>property to attribute reflection with bind</title>
+    <script src="../../polymer.js"></script>
+    <script src="../../../tools/test/htmltest.js"></script>
+    <script src="../../../tools/test/chai/chai.js"></script>
+  </head>
+
+  <body>
+    <polymer-element name="my-child-element">
+      <template>
+        <h1>Hello from the child</h1>
+        <p>The camelCase is {{camelCase}}, attr is {{attributes.camelCase.value}}</p>
+        <p>The lowercase is {{lowercase}}, attr is {{attributes.lowercase.value}}</p>
+      </template>
+      <script>
+Polymer('my-child-element', {
+  publish: { camelCase: 0, lowercase: 0 },
+  // Make this a no-op, so we can verify the initial
+  // reflectPropertyToAttribute works.
+  observeAttributeProperty: function(name) { }
+});
+      </script>
+    </polymer-element>
+
+    <polymer-element name="my-element">
+      <template>
+        <h1>Hello from the custom element. The volume is {{volume}}</h1>
+        <p>
+          <my-child-element id="child"
+              camelCase="{{volume}}" lowercase="{{volume}}"></my-child-element>
+        </p>
+      </template>
+      <script>
+Polymer('my-element', {
+  publish: { volume: 11 },
+  ready: function() {
+    var child = this.$.child;
+    chai.assert.equal(child.lowercase, 11);
+    chai.assert.equal(child.camelCase, 11);
+
+    chai.assert.equal('' + child.lowercase, child.getAttribute('lowercase'));
+    chai.assert.equal('' + child.camelCase, child.getAttribute('camelcase'));
+
+    done();
+  }
+});
+      </script>
+    </polymer-element>
+
+    <my-element></my-element>
+  </body>
+</html>
diff --git a/test/js/bindMDV.js b/test/js/bindMDV.js
index 7cb89b48fd..f7894b5e0b 100644
--- a/test/js/bindMDV.js
+++ b/test/js/bindMDV.js
@@ -12,14 +12,14 @@ suite('bindMDV', function() {
     t.innerHTML = html;
     return t.createInstance(model);
   }
-  
+
   test('bindModel bindModel', function(done) {
     var test = document.createElement('div');
     var fragment = parseAndBindHTML('<div id="a" foo="{{bar}}"></div>',
       test);
     test.appendChild(fragment);
     var a = test.querySelector('#a');
-    
+
     test.bar = 5;
     Platform.flush();
     var mutation = 0;
@@ -35,7 +35,7 @@ suite('bindMDV', function() {
       }
     }).observe(a, {attributes: true});
   });
-  
+
   test('bindModel bind input', function(done) {
     var test = document.createElement('div');
     var fragment = parseAndBindHTML('<input value="{{bar}}" />', test);
@@ -50,7 +50,7 @@ suite('bindMDV', function() {
       done();
     });
   });
-  
+
 });
 
 
@@ -58,4 +58,5 @@ htmlSuite('bind', function() {
   htmlTest('html/template-distribute-dynamic.html');
   htmlTest('html/bind.html');
   htmlTest('html/unbind.html');
+  htmlTest('html/prop-attr-bind-reflection.html');
 });