knockout.js - IE -7 classe CSS Issue

Question

Ecco un piccolo problema divertente che ho incontrato con impostazione dinamica della classe per una serie di div.

Utilizzo di Knockout.js sto assegnando le classi utilizzate tramite l'associazione 'attr'.

Questo funziona bene in tutti i browser che ho provato ad eccezione di IE-7 (non è preoccupato per IE-6, ecc)

Ho un esempio jsfiddle evidenziando il issue here

Nell'esempio la statica (in alto fila) deve corrispondere a quella inferiore (ko generato) In IE7 sto solo vedendo la più ampia colore selettore CSS (argento)

Answer 1

IE7 richiede che si imposta className invece di class.

Per esempio, questo funziona in IE7 e altri browser: http://jsfiddle.net/thirtydot/VVuGh/14/

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

Tuttavia, il supporto per questo cavillo IE7 dovrebbe idealmente non essere nel tuo codice HTML. All'interno di knockout.js sarebbe un posto migliore, anche se non so nulla della biblioteca per essere in grado di fare una tale raccomandazione.

Answer 2

Se il nome della classe non può essere determinato quando si genera il modello (vale a dire che fa parte del modello), è possibile creare un custom binding.

Il contenuto dei init/update metodi sarebbe solo impostare il nome della classe per element in base a ciò che viene restituito dalla valueAccessor. Per un semplice esempio, si potrebbe fare (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. 

    } 
}; 

si potrebbe costruire un più complesso legame basato sulla eliminazione diretta css binding.