fix PolymerElement.bind to call reflectPropertyToAttribute w/ prop name

This is the fix for issue 14060 Polymer.js fix is at: Polymer/polymer#319 R=sigmund@google.com Review URL: https://codereview.chromium.org//27417002 git-svn-id: https://dart.googlecode.com/svn/branches/bleeding_edge@28688 260f80e4-7a28-3924-810f-c04153c831b5
svn2github · Oct 15, 2013 · f16f3b7 · f16f3b7
1 parent e795ef6
commit f16f3b7
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 1 deletion.
diff --git a/dart/pkg/pkg.status b/dart/pkg/pkg.status
@@ -67,6 +67,7 @@ polymer/test/attr_mustache_test: Fail, Timeout # Issue 12865, 13197, 13260
 polymer/test/event_path_test: Fail, Timeout # Issue 12865, 13197, 13260
 polymer/test/events_test: Fail, Timeout # Issue 12865, 13197, 13260
 polymer/test/prop_attr_reflection_test: Fail, Timeout # Issue 12865, 13197, 13260
+polymer/test/prop_attr_bind_reflection_test: Fail, Timeout # Issue 12865, 13197, 13260
 polymer/test/publish_attributes_test: Fail, Timeout # Issue 12865, 13197, 13260
 polymer/test/take_attributes_test: Fail, Timeout # Issue 12865, 13197, 13260
 polymer_expressions/test/globals_test: Fail # Issue 13890
@@ -78,6 +79,7 @@ polymer/test/event_path_test: Pass, Timeout # Issue 13260
 polymer/test/events_test: Pass, Timeout # Issue 13260
 polymer/test/instance_attrs_test: Pass, Timeout # Issue 13260
 polymer/test/prop_attr_reflection_test: Pass, Timeout # Issue 13260
+polymer/test/prop_attr_bind_reflection_test: Pass, Timeout # Issue 13260
 polymer/test/publish_attributes_test: Pass, Timeout # Issue 13260
 polymer/test/take_attributes_test: Pass, Timeout # Issue 13260
 
@@ -92,6 +94,7 @@ polymer/test/event_path_test: Fail, OK # Uses dart:html
 polymer/test/events_test: Fail, OK # Uses dart:html
 polymer/test/instance_attrs_test: Fail, OK # Uses dart:html
 polymer/test/prop_attr_reflection_test: Fail, OK # Uses dart:html
+polymer/test/prop_attr_bind_reflection_test: Fail, OK # Uses dart:html
 polymer/test/publish_attributes_test: Fail, OK # Uses dart:html
 polymer/test/take_attributes_test: Fail, OK # Uses dart:html
 polymer/example: Fail, OK # Uses dart:html

diff --git a/dart/pkg/polymer/lib/src/instance.dart b/dart/pkg/polymer/lib/src/instance.dart
@@ -394,7 +394,9 @@ abstract class Polymer implements Element {
       // reflect bound property to attribute when binding
       // to ensure binding is not left on attribute if property
       // does not update due to not changing.
-      reflectPropertyToAttribute(name);
+      // Dart note: we include this patch:
+      // https://github.com/Polymer/polymer/pull/319
+      reflectPropertyToAttribute(MirrorSystem.getName(property.simpleName));
       return bindings[name] = observer;
     } else {
       // Cannot call super.bind because of

diff --git a/dart/pkg/polymer/test/prop_attr_bind_reflection_test.dart b/dart/pkg/polymer/test/prop_attr_bind_reflection_test.dart
@@ -0,0 +1,43 @@
+// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'dart:async' show Completer;
+import 'dart:html';
+import 'package:unittest/unittest.dart';
+import 'package:unittest/html_config.dart';
+import 'package:polymer/polymer.dart';
+
+@CustomTag('my-child-element')
+class MyChildElement extends PolymerElement {
+  @published int camelCase;
+  @published int lowercase;
+
+  MyChildElement.created() : super.created();
+
+  // Make this a no-op, so we can verify the initial
+  // reflectPropertyToAttribute works.
+  observeAttributeProperty(name) { }
+}
+
+@CustomTag('my-element')
+class MyElement extends PolymerElement {
+  @observable int volume = 11;
+
+  MyElement.created() : super.created();
+}
+
+main() {
+  useHtmlConfiguration();
+
+  setUp(() => Polymer.onReady);
+
+  test('attribute reflected to property name', () {
+    var child = query('my-element').shadowRoot.query('my-child-element');
+    expect(child.lowercase, 11);
+    expect(child.camelCase, 11);
+
+    expect('11', child.attributes['lowercase']);
+    expect('11', child.attributes['camelcase']);
+  });
+}
diff --git a/dart/pkg/polymer/test/prop_attr_bind_reflection_test.html b/dart/pkg/polymer/test/prop_attr_bind_reflection_test.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>property to attribute reflection with bind</title>
+    <script src="packages/polymer/boot.js"></script>
+    <script src="packages/unittest/test_controller.js"></script>
+  </head>
+
+  <body>
+    <polymer-element name="my-child-element">
+      <template>
+        <h1>Hello from the child</h1>
+        <p>The camelCase is {{camelCase}}, attr {{attributes["camelCase"]}}</p>
+        <p>The lowercase is {{lowercase}}, attr {{attributes["lowercase"]}}</p>
+      </template>
+    </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>
+    </polymer-element>
+
+    <my-element></my-element>
+
+    <script type="application/dart" src="prop_attr_bind_reflection_test.dart">
+    </script>
+  </body>
+</html>