Merge pull request knockout#334 from rniemeyer/css-binding-prevent-le…

…ading-space Avoid adding a leading space in css binding.
joeldart · Feb 25, 2012 · a2744a0 · a2744a0
2 parents 5aaca60 + 248e063
commit a2744a0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/spec/defaultBindingsBehaviors.js b/spec/defaultBindingsBehaviors.js
@@ -662,6 +662,16 @@ describe('Binding: CSS class name', {
         value_of(testNode.childNodes[0].className).should_be("unrelatedClass1 unrelatedClass2 anotherRule myRule");
         observable2(false);
         value_of(testNode.childNodes[0].className).should_be("unrelatedClass1 unrelatedClass2 myRule");
+    },
+
+    'Should give the element a single CSS class without a leading space when the specified value is true': function() {
+        var observable1 = new ko.observable();
+        testNode.innerHTML = "<div data-bind='css: { myRule: someModelProperty }'>Hallo</div>";
+        ko.applyBindings({ someModelProperty: observable1 }, testNode);
+
+        value_of(testNode.childNodes[0].className).should_be("");
+        observable1(true);
+        value_of(testNode.childNodes[0].className).should_be("myRule");
     }
 });
 

diff --git a/src/utils.js b/src/utils.js
@@ -268,17 +268,13 @@ ko.utils = new (function () {
             return ko.isObservable(value) ? value() : value;
         },
 
-        domNodeHasCssClass: function (node, className) {
+        toggleDomNodeCssClass: function (node, className, shouldHaveClass) {
             var currentClassNames = (node.className || "").split(/\s+/);
-            return ko.utils.arrayIndexOf(currentClassNames, className) >= 0;
-        },
+            var hasClass = ko.utils.arrayIndexOf(currentClassNames, className) >= 0;
 
-        toggleDomNodeCssClass: function (node, className, shouldHaveClass) {
-            var hasClass = ko.utils.domNodeHasCssClass(node, className);
             if (shouldHaveClass && !hasClass) {
-                node.className = (node.className || "") + " " + className;
+                node.className += (currentClassNames[0] ? " " : "") + className;
             } else if (hasClass && !shouldHaveClass) {
-                var currentClassNames = (node.className || "").split(/\s+/);
                 var newClassName = "";
                 for (var i = 0; i < currentClassNames.length; i++)
                     if (currentClassNames[i] != className)