"class" binding only support class string. "css" binding continues to…

… support object and string forms.
knockout · Dec 11, 2015 · c02cf64 · c02cf64
1 parent 3d46cca
commit c02cf64
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/spec/defaultBindings/cssBehaviors.js b/spec/defaultBindings/cssBehaviors.js
@@ -103,10 +103,6 @@ describe('Binding: CSS classes', function() {
         expect(testNode.childNodes[0].className).toEqual("unrelatedClass1 my-Rule");
     });
 
-    it('Should be aliased as class as well as css', function() {
-        expect(ko.bindingHandlers['class']).toEqual(ko.bindingHandlers.css);
-    });
-
     it('Should be able to combine "class" and "css" bindings with dynamic and static classes', function () {
         // This test doesn't cover cases where the static and dynamic bindings try to set or unset the same class name
         // because the behavior for that scenario isn't defined.

diff --git a/src/binding/defaultBindings/css.js b/src/binding/defaultBindings/css.js
@@ -1,5 +1,14 @@
 var classesWrittenByBindingKey = '__ko__cssValue';
-ko.bindingHandlers['class'] = ko.bindingHandlers['css'] = {
+ko.bindingHandlers['class'] = {
+    'update': function (element, valueAccessor) {
+        var value = ko.utils.stringTrim(ko.utils.unwrapObservable(valueAccessor()));
+        ko.utils.toggleDomNodeCssClass(element, element[classesWrittenByBindingKey], false);
+        element[classesWrittenByBindingKey] = value;
+        ko.utils.toggleDomNodeCssClass(element, value, true);
+    }
+};
+
+ko.bindingHandlers['css'] = {
     'update': function (element, valueAccessor) {
         var value = ko.utils.unwrapObservable(valueAccessor());
         if (value !== null && typeof value == "object") {
@@ -8,10 +17,7 @@ ko.bindingHandlers['class'] = ko.bindingHandlers['css'] = {
                 ko.utils.toggleDomNodeCssClass(element, className, shouldHaveClass);
             });
         } else {
-            value = ko.utils.stringTrim(String(value || '')); // Make sure we don't try to store or set a non-string value
-            ko.utils.toggleDomNodeCssClass(element, element[classesWrittenByBindingKey], false);
-            element[classesWrittenByBindingKey] = value;
-            ko.utils.toggleDomNodeCssClass(element, value, true);
+            ko.bindingHandlers['class']['update'](element, valueAccessor);
         }
     }
 };