knockout.js - IE -7 clase css Número

Question

Aquí hay un pequeño problema divertido que he encontrado con estableciendo dinámicamente la clase para una matriz de divs.

Usando Knockout.js estoy asignando las clases utilizadas a través del enlace 'attr'.

Esto funciona bien en todos los navegadores que he probado, excepto IE-7 (No preocupado por IE-6, etc.)

Tengo un ejemplo jsFiddle destacando la issue here

En el ejemplo de la estática (arriba fila) debe coincidir con el de abajo (ko genera) En IE7 sólo estoy viendo el color selector CSS más amplio (plata)

Answer 1

IE7 requiere que establezca className en lugar de class.

Por ejemplo, esto funciona en IE7 y otros navegadores: http://jsfiddle.net/thirtydot/VVuGh/14/

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

Sin embargo, el apoyo a esta peculiaridad IE7, lo ideal sería no estar en su HTML. Dentro de knockout.js sería un lugar mejor, aunque no sé nada sobre la biblioteca para poder hacer tal recomendación.

Answer 2

Si no se puede determinar el nombre de su clase al generar la plantilla (es decir, es parte de su modelo), puede crear un custom binding.

El contenido de sus init/update métodos sería simplemente establecer el nombre de clase para element basado en lo que se devuelve por el valueAccessor. Para un ejemplo simple, se puede hacer (usando jQuery):

ko.bindingHandlers.yourBindingName = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     // This will be called when the binding is first applied to an element 
     // Set up any initial state, event handlers, etc. here 

     $(element).addClass(valueAccessor()); 

    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     // This will be called once when the binding is first applied to an element, 
     // and again whenever the associated observable changes value. 
     // Update the DOM element based on the supplied values here. 

    } 
}; 

Usted puede construir un mundo más complejo de unión basados ​​en el nocaut css binding.