diff --git a/modules/angular2/src/render/dom/view/proto_view_builder.ts b/modules/angular2/src/render/dom/view/proto_view_builder.ts index f76dc58f4f..11ef7a1e59 100644 --- a/modules/angular2/src/render/dom/view/proto_view_builder.ts +++ b/modules/angular2/src/render/dom/view/proto_view_builder.ts @@ -23,7 +23,12 @@ import {DomElementBinder, Event, HostAction} from './element_binder'; import * as api from '../../api'; -import {NG_BINDING_CLASS, EVENT_TARGET_SEPARATOR, queryBoundTextNodeIndices} from '../util'; +import { + NG_BINDING_CLASS, + EVENT_TARGET_SEPARATOR, + queryBoundTextNodeIndices, + camelCaseToDashCase +} from '../util'; export class ProtoViewBuilder { variableBindings: Map = new Map(); @@ -366,7 +371,8 @@ function createElementPropertyBinding(ast: ASTWithSource, propertyNameInTemplate } else if (parts[0] == ATTRIBUTE_PREFIX) { return new api.ElementPropertyBinding(api.PropertyBindingType.ATTRIBUTE, ast, parts[1]); } else if (parts[0] == CLASS_PREFIX) { - return new api.ElementPropertyBinding(api.PropertyBindingType.CLASS, ast, parts[1]); + return new api.ElementPropertyBinding(api.PropertyBindingType.CLASS, ast, + camelCaseToDashCase(parts[1])); } else if (parts[0] == STYLE_PREFIX) { var unit = parts.length > 2 ? parts[2] : null; return new api.ElementPropertyBinding(api.PropertyBindingType.STYLE, ast, parts[1], unit); diff --git a/modules/angular2/src/render/dom/view/view.ts b/modules/angular2/src/render/dom/view/view.ts index 501fd74b72..11a5db1c98 100644 --- a/modules/angular2/src/render/dom/view/view.ts +++ b/modules/angular2/src/render/dom/view/view.ts @@ -42,11 +42,10 @@ export class DomView { setElementClass(elementIndex: number, className: string, isAdd: boolean) { var element = this.boundElements[elementIndex]; - var dashCasedClassName = camelCaseToDashCase(className); if (isAdd) { - DOM.addClass(element, dashCasedClassName); + DOM.addClass(element, className); } else { - DOM.removeClass(element, dashCasedClassName); + DOM.removeClass(element, className); } } diff --git a/modules/angular2/test/directives/class_spec.ts b/modules/angular2/test/directives/class_spec.ts index 7845231b48..313442c969 100644 --- a/modules/angular2/test/directives/class_spec.ts +++ b/modules/angular2/test/directives/class_spec.ts @@ -61,6 +61,22 @@ export function main() { }); })); + + it('should add classes specified in an object literal without change in class names', + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + var template = `
`; + + tcb.overrideTemplate(TestComponent, template) + .createAsync(TestComponent) + .then((rootTC) => { + rootTC.detectChanges(); + expect(rootTC.componentViewChildren[0].nativeElement.className) + .toEqual('ng-binding foo-bar fooBar'); + + async.done(); + }); + })); + it('should add and remove classes based on changes in object literal values', inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { var template = '
'; @@ -141,14 +157,14 @@ export function main() { it('should add classes specified in a list literal', inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { - var template = `
`; + var template = `
`; tcb.overrideTemplate(TestComponent, template) .createAsync(TestComponent) .then((rootTC) => { rootTC.detectChanges(); expect(rootTC.componentViewChildren[0].nativeElement.className) - .toEqual('ng-binding foo bar'); + .toEqual('ng-binding foo bar foo-bar fooBar'); async.done(); }); @@ -212,14 +228,14 @@ export function main() { it('should add classes specified in a string literal', inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { - var template = `
`; + var template = `
`; tcb.overrideTemplate(TestComponent, template) .createAsync(TestComponent) .then((rootTC) => { rootTC.detectChanges(); expect(rootTC.componentViewChildren[0].nativeElement.className) - .toEqual('ng-binding foo bar'); + .toEqual('ng-binding foo bar foo-bar fooBar'); async.done(); }); diff --git a/modules/angular2/test/render/dom/view/view_spec.ts b/modules/angular2/test/render/dom/view/view_spec.ts index 05ae70fc70..8c62ee7f5b 100644 --- a/modules/angular2/test/render/dom/view/view_spec.ts +++ b/modules/angular2/test/render/dom/view/view_spec.ts @@ -100,11 +100,15 @@ export function main() { expect(DOM.hasClass(el, 'active')).toEqual(false); }); - it('should de-normalize class names', () => { + it('should not de-normalize class names', () => { view.setElementClass(0, 'veryActive', true); + view.setElementClass(0, 'very-active', true); + expect(DOM.hasClass(el, 'veryActive')).toEqual(true); expect(DOM.hasClass(el, 'very-active')).toEqual(true); view.setElementClass(0, 'veryActive', false); + view.setElementClass(0, 'very-active', false); + expect(DOM.hasClass(el, 'veryActive')).toEqual(false); expect(DOM.hasClass(el, 'very-active')).toEqual(false); }); });