feat(element binder): Bind to Web Component properties

jbdeboer · jbdeboer · commit c53dc779862c · 2014-07-30T08:49:01.000-07:00
Closes #1277
diff --git a/example/web/paper_progress.html b/example/web/paper_progress.html
@@ -12,15 +12,18 @@
           href="bower_components/paper-progress/paper-progress.html">
     <script type="application/dart" src="paper_progress.dart"></script>
     <script src="packages/browser/dart.js"></script>
+    <style>
+        div { padding: 0.25em; }
+    </style>
   </head>
   <body>
     <h2>A quick demo of the Polymer paper-progress widget in an AngularDart app.</h2>
-    <p>The max ({{max}}) and value ({{curValue}}) properties are bound through attribute intropolation</p>
+    <p>The max ({{max}}) and value ({{curValue}}) properties are bound through bind-* semantics</p>
 
     <p>Text from Angular: <b>{{text}}</b></p>
     
     <div>
-      <paper-progress max={{max}} value={{curValue}}></paper-progress>
+      <paper-progress bind-max=max bind-value=curValue></paper-progress>
     </div>
      
     <p>
diff --git a/lib/core_dom/element_binder.dart b/lib/core_dom/element_binder.dart
@@ -62,7 +62,7 @@ class ElementBinder {
   }
 
   bool get hasDirectivesOrEvents =>
-      _usableDirectiveRefs.isNotEmpty || onEvents.isNotEmpty;
+      _usableDirectiveRefs.isNotEmpty || onEvents.isNotEmpty || bindAttrs.isNotEmpty;
 
   void _bindTwoWay(tasks, AST ast, scope, directiveScope,
                    controller, AST dstAST) {
@@ -283,6 +283,14 @@ class ElementBinder {
 
     _link(nodeInjector, scope, nodeAttrs);
 
+    var jsNode;
+    bindAttrs.forEach((String prop, ast) {
+      if (jsNode == null) jsNode = new js.JsObject.fromBrowserObject(node);
+      scope.watchAST(ast, (v, _) {
+        jsNode[prop] = v;
+      });
+    });
+
     if (onEvents.isNotEmpty) {
       onEvents.forEach((event, value) {
         view.registerEvent(EventHandler.attrNameToEventName(event));
diff --git a/test/core_dom/web_components_spec.dart b/test/core_dom/web_components_spec.dart
@@ -0,0 +1,62 @@
+library angular.dom.web_components_spec;
+
+import '../_specs.dart';
+import 'dart:js' as js;
+
+registerElement(String name, prototype) {
+  return (new js.JsObject.fromBrowserObject(document)).callMethod('registerElement',
+          [name, new js.JsObject.jsify({"prototype": prototype })]);
+}
+
+
+
+main() {
+  describe('WebComponent support', () {
+    TestBed _;
+
+    customProp(String prop, [elt]) {
+      if (elt == null) elt = _.rootElement;
+      return (new js.JsObject.fromBrowserObject(elt))[prop];
+    }
+
+    beforeEach((TestBed tb) {
+      _ = tb;
+    });
+    
+    it('should create custom elements', () {
+      registerElement('tests-basic', {'prop-x': 6});
+      
+      // Create a web component
+      _.compile('<tests-basic></tests-basic>');
+      expect(customProp('prop-x')).toEqual(6);
+    });
+
+
+    it('should bind to Custom Element properties', () {
+      registerElement('tests-bound', {'prop-y': 10});
+      _.compile('<tests-bound bind-prop-y=27></tests-bound>');
+
+      // Scope has not been digested yet
+      expect(customProp('prop-y')).toEqual(10);
+
+      _.rootScope.apply();
+      expect(customProp('prop-y')).toEqual(27);
+    });
+
+
+    it('should bind to a non-existent property', () {
+      registerElement('tests-empty', {});
+      _.compile('<tests-empty bind-new-prop=27></tests-empty>');
+      _.rootScope.apply();
+      expect(customProp('new-prop')).toEqual(27);
+    });
+    
+    it('should bind to both directives and properties', () {
+      registerElement('tests-double', {});
+      _.compile('<tests-double ng-bind bind-ng-bind="\'hello\'"></tests-double>');
+      _.rootScope.apply();
+      expect(customProp('ng-bind')).toEqual("hello");
+      expect(_.rootElement).toHaveText('hello');
+    });
+  });
+}
