knockout.js - IE -7 css class Issue

Question

Here is a funny little issue i've come across with dynamically setting the class for a array of divs.

Using Knockout.js i'm assigning the classes used via the 'attr' binding.

This works well in all browsers i've tested except IE-7 (Not worried about IE-6 etc)

I have an jsfiddle example highlighting the issue here

In the example the static (top row) should match the bottom one (ko generated) In IE-7 i'm just seeing the broadest css selector color (Silver)

Answer 1

IE7 requires that you set className instead of class.

For instance, this works in IE7 and other browsers: http://jsfiddle.net/thirtydot/VVuGh/14/

<div data-bind='attr: { "class": classes, "className": classes }'></div>

However, support for this IE7 quirk should ideally not be in your HTML. Inside knockout.js would be a better place, though I know nothing about the library to be able to make such a recommendation.