feat: support binding to style.stylename.suffix

Closes #553
2015-02-05 16:49:42 -08:00
parent dbdadbafe9
commit ee3f709fbf
4 changed files with 118 additions and 3 deletions
@@ -178,6 +178,73 @@ export function main() {
      expect(view.nodes[0].hidden).toEqual(false);
    });

+    it('should bind class with a dot', () => {
+      var propertyBindings = MapWrapper.createFromStringMap({
+        'class.bar': 'prop1',
+      });
+      var pipeline = createPipeline({propertyBindings: propertyBindings});
+      var results = pipeline.process(el('<input class="foo" viewroot prop-binding>'));
+      var pv = results[0].inheritedProtoView;
+
+      expect(pv.elementBinders[0].hasElementPropertyBindings).toBe(true);
+
+      instantiateView(pv);
+
+      evalContext.prop1 = true;
+      changeDetector.detectChanges();
+      expect(view.nodes[0].className).toEqual('foo ng-binding bar');
+
+      evalContext.prop1 = false;
+      changeDetector.detectChanges();
+      expect(view.nodes[0].className).toEqual('foo ng-binding');
+    });
+
+    it('should bind style with a dot', () => {
+      var propertyBindings = MapWrapper.createFromStringMap({
+        'style.color': 'prop1',
+      });
+      var pipeline = createPipeline({propertyBindings: propertyBindings});
+      var results = pipeline.process(el('<div viewroot prop-binding>'));
+      var pv = results[0].inheritedProtoView;
+
+      expect(pv.elementBinders[0].hasElementPropertyBindings).toBe(true);
+
+      instantiateView(pv);
+
+      evalContext.prop1 = 'red';
+      changeDetector.detectChanges();
+      expect(view.nodes[0].style.color).toEqual('red');
+
+      evalContext.prop1 = 'blue';
+      changeDetector.detectChanges();
+      expect(view.nodes[0].style.color).toEqual('blue');
+    });
+
+    it('should bind style with a dot and suffix', () => {
+      var propertyBindings = MapWrapper.createFromStringMap({
+        'style.font-size.px': 'prop1',
+      });
+      var pipeline = createPipeline({propertyBindings: propertyBindings});
+      var results = pipeline.process(el('<div viewroot prop-binding>'));
+      var pv = results[0].inheritedProtoView;
+
+      expect(pv.elementBinders[0].hasElementPropertyBindings).toBe(true);
+
+      instantiateView(pv);
+
+      evalContext.prop1 = 10;
+      changeDetector.detectChanges();
+      expect(DOM.getStyle(view.nodes[0], 'font-size')).toEqual('10px');
+
+      evalContext.prop1 = 20;
+      changeDetector.detectChanges();
+      expect(DOM.getStyle(view.nodes[0], 'font-size')).toEqual('20px');
+
+      evalContext.prop1 = null;
+      changeDetector.detectChanges();
+      expect(DOM.getStyle(view.nodes[0], 'font-size')).toEqual('');
+    });
+
    it('should bind events', () => {
      var eventBindings = MapWrapper.createFromStringMap({
        'event1': '1+1'