Addresses issue #188:

- attributes are now reflected to property values at runtime, not only at create time. The rules are the same, the attribute is deserialized to the data type of the property in the element's prototype. - `published` properties are now reflected to attributes at runtime. This is done via observation and all published properties are now observed. Properties are serialized directly to strings and object and undefined valued properties are ignored.
Polymer · Jul 24, 2013 · 318a260 · 318a260
1 parent f50c6f8
commit 318a260
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 3 deletions.
diff --git a/polymer.js b/polymer.js
@@ -21,8 +21,8 @@ var modules = [
   "api.js",
   "instance/utils.js",
   "instance/events.js",
-  "instance/properties.js",
   "instance/attributes.js",
+  "instance/properties.js",
   "instance/mdv.js",
   "instance/base.js",
   "instance/styles.js",

diff --git a/src/instance/attributes.js b/src/instance/attributes.js
@@ -61,6 +61,19 @@
     // convert representation of 'stringValue' based on type of 'defaultValue'
     deserializeValue: function(stringValue, defaultValue) {
       return scope.deserializeValue(stringValue, defaultValue);
+    },
+    serializeValue: function(value) {
+      if (typeof value != 'object' && value !== undefined) {
+        return value;
+      }
+    },
+    propertyToAttribute: function(name) {
+      if (Object.keys(this[PUBLISHED]).indexOf(name) >= 0) {
+        var serializedValue = this.serializeValue(this[name]);
+        if (serializedValue !== undefined) {
+          this.setAttribute(name, serializedValue);
+        }
+      }
     }
   };
 

diff --git a/src/instance/base.js b/src/instance/base.js
@@ -100,7 +100,8 @@
         };
       }
     },
-    attributeChangedCallback: function() {
+    attributeChangedCallback: function(name, oldValue) {
+      this.attributeToProperty(name, this.getAttribute(name));
       if (this.attributeChanged) {
         this.attributeChanged.apply(this, arguments);
       }

diff --git a/src/instance/properties.js b/src/instance/properties.js
@@ -12,6 +12,8 @@
   // magic words
 
   var OBSERVE_SUFFIX = 'Changed';
+
+  var PUBLISHED = scope.api.instance.attributes.PUBLISHED;
 
   // element api
 
@@ -53,10 +55,13 @@
       unregisterObservers(this);
     },
     // property should be observed if it has an observation callback
+    // or if it is published
     shouldObserveProperty: function(name) {
-      return Boolean(this[name + OBSERVE_SUFFIX]);
+      return Boolean(this[name + OBSERVE_SUFFIX] || 
+          Object.keys(this[PUBLISHED]).indexOf(name) >= 0);
     },
     dispatchPropertyChange: function(name, oldValue) {
+      this.propertyToAttribute(name);
       invoke.call(this, name + OBSERVE_SUFFIX, [oldValue]);
     }
   };

diff --git a/test/html/prop-attr-reflection.html b/test/html/prop-attr-reflection.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html>
+  <head>
+    <title>publish attributes</title>
+    <script src="../../polymer.js"></script>
+    <script src="../../tools/test/htmltest.js"></script>
+    <script src="../../node_modules/chai/chai.js"></script>
+  </head>
+  <body>
+
+    <x-foo></x-foo>
+    <polymer-element name="x-foo" attributes="foo baz" noscript></polymer-element>
+
+    <x-bar></x-bar>
+    <polymer-element name="x-bar" extends="x-foo">
+      <script>
+        Polymer('x-bar', {
+          publish: {
+            zot: 3,
+            zim: false,
+            str: 'str',
+            obj: null
+          }
+        });
+      </script>
+    </polymer-element>
+
+  <script>
+      var assert = chai.assert;
+      document.addEventListener('WebComponentsReady', function() {
+        //
+        var xfoo = document.querySelector('x-foo');
+        xfoo.foo = 5;
+        Platform.flush();
+        assert.equal(String(xfoo.foo), xfoo.getAttribute('foo'), 'attribute reflects property as string');
+        xfoo.setAttribute('foo', '27');
+        assert.equal(xfoo.foo, xfoo.getAttribute('foo'), 'property reflects attribute');
+        //
+        xfoo.baz = 'Hello';
+        Platform.flush();
+        assert.equal(xfoo.baz, xfoo.getAttribute('baz'), 'attribute reflects property');
+        //
+        var xbar = document.querySelector('x-bar');
+        //
+        xbar.foo = 'foo!';
+        xbar.zot = 27;
+        xbar.zim = true;
+        xbar.str = 'str!';
+        xbar.obj = {hello: 'world'};
+        Platform.flush();
+        assert.equal(xbar.foo, xbar.getAttribute('foo'), 'inherited published property is reflected');
+        assert.equal(String(xbar.zot), xbar.getAttribute('zot'), 'attribute reflects property as number');
+        assert.equal(String(xbar.zim), xbar.getAttribute('zim'), 'attribute reflects property as boolean');
+        assert.equal(xbar.str, xbar.getAttribute('str'), 'attribute reflects property as published string');
+        assert.isFalse(xbar.hasAttribute('obj'), 'attribute does not reflect object property');
+        xbar.setAttribute('foo', 'foo!!');
+        xbar.setAttribute('zot', 54);
+        xbar.setAttribute('zim', 'false');
+        xbar.setAttribute('str', 'str!!');
+        xbar.setAttribute('obj', "{'hello': 'world'}");
+        assert.equal(xbar.foo, xbar.getAttribute('foo'), 'property reflects attribute as string');
+        assert.equal(xbar.zot, 54, 'property reflects attribute as number');
+        assert.equal(xbar.zim, false, 'property reflects attribute as boolean');
+        assert.equal(xbar.str, 'str!!', 'property reflects attribute as published string');
+        assert.deepEqual(xbar.obj, {hello: 'world'}, 'property reflects attribute as object');
+        done();
+      });
+    </script>
+  </body>
+</html>
diff --git a/test/js/attrs.js b/test/js/attrs.js
@@ -8,4 +8,5 @@ htmlSuite('attributes-declarative', function() {
   htmlTest('html/publish-attributes.html');
   htmlTest('html/take-attributes.html');
   htmlTest('html/attr-mustache.html');
+  htmlTest('html/prop-attr-reflection.html');
 });