Merge branch '323-IE-class-attr'

Author: SteveSanderson

spec/defaultBindingsBehaviors.js

@@ -913,6 +913,18 @@ describe('Binding: Attr', {
             model.myprop(testValue);
             value_of(testNode.childNodes[0].getAttribute("someAttrib")).should_be(null);        
         });        
+    },
+
+    'Should be able to set class attribute and access it using className property': function() {
+        var model = { myprop : ko.observable("newClass") };
+        testNode.innerHTML = "<div class='oldClass' data-bind=\"attr: {'class': myprop}\"></div>";
+        value_of(testNode.childNodes[0].className).should_be("oldClass");
+        ko.applyBindings(model, testNode);
+        value_of(testNode.childNodes[0].className).should_be("newClass");
+        // Should be able to clear class also
+        model.myprop(undefined);
+        value_of(testNode.childNodes[0].className).should_be("");        
+        value_of(testNode.childNodes[0].getAttribute("class")).should_be(null);        
     }  
 });
 

src/binding/defaultBindings.js

@@ -425,20 +425,34 @@ ko.bindingHandlers['checked'] = {
     }
 };
 
+var attrHtmlToJavascriptMap = { 'class': 'className', 'for': 'htmlFor' };
 ko.bindingHandlers['attr'] = {
     'update': function(element, valueAccessor, allBindingsAccessor) {
         var value = ko.utils.unwrapObservable(valueAccessor()) || {};
         for (var attrName in value) {
             if (typeof attrName == "string") {
                 var attrValue = ko.utils.unwrapObservable(value[attrName]);
-                
+
                 // To cover cases like "attr: { checked:someProp }", we want to remove the attribute entirely 
                 // when someProp is a "no value"-like value (strictly null, false, or undefined)
                 // (because the absence of the "checked" attr is how to mark an element as not checked, etc.)                
-                if ((attrValue === false) || (attrValue === null) || (attrValue === undefined))
+                var toRemove = (attrValue === false) || (attrValue === null) || (attrValue === undefined);
+                if (toRemove)
                     element.removeAttribute(attrName);
-                else 
+
+                // In IE <= 7 and IE8 Quirks Mode, you have to use the Javascript property name instead of the 
+                // HTML attribute name for certain attributes. IE8 Standards Mode supports the correct behavior,
+                // but instead of figuring out the mode, we'll just set the attribute through the Javascript 
+                // property for IE <= 8.
+                if (ko.utils.ieVersion <= 8 && attrName in attrHtmlToJavascriptMap) {
+                    attrName = attrHtmlToJavascriptMap[attrName];
+                    if (toRemove)
+                        element.removeAttribute(attrName);
+                    else
+                        element[attrName] = attrValue;
+                } else if (!toRemove) {
                     element.setAttribute(attrName, attrValue.toString());
+                }
             }
         }
     }