Binding stile knockout: firefox non imposta background-color?

Question

Quando provo a cambiare il colore di una piccola scatola sfondo utilizzando i style knockout.js rilegatura:

<input class="biggerBox" type="text" data-bind="value: colorText, valueUpdate: 'afterkeydown'" /> 
<div class="littleBox" data-bind="style: {'background-color': colorText}"></div> 

e nei js:

var viewModel = { 
    colorText: ko.observable('rgba(80, 120, 160, 1)') 
}; 
ko.applyBindings(viewModel); 

Funziona proprio come mi aspetto in Chrome e Safari, il colore di sfondo della piccola scatola cambia mentre digito il testo nella casella di input. Ma non in Firefox 24.0 su un Mac; le modifiche osservabili di colorText, ma il colore di sfondo non viene mai impostato. Tuttavia, se provo a cambiare il colore di primo piano, funziona su Chrome, Safari e Firefox. Non ho provato IE.

Sto fraintendendo la programmazione qui? O è un bug knockout.js? O un bug di Firefox? Non sembra essere nulla a che fare con How to use the style data bindings?

jsfiddle here

Answer 1

Si dovrebbe usare backgroundColor attributo al posto di background-color.

Live Demo.

Questa non è una cosa specifica di Knockout. Come si può vedere nel the relevant KO source code file, lo stile set di legame in questo modo:

element.style[styleName] = styleValue || "";

Firefox gestisce questo element.style[...] sintassi diversa da Chrome, come si può vedere se si digita il seguente in entrambe le finestre di console:

document.body.style['background-color'] = 'red' 

Questo funziona in Chrome, non in Firefox. (È interessante notare che, funziona anche in IE11.)

Answer 2

Utilizzando la sintassi alternativa per definire i nomi delle classi CSS lavora a Firefox:

<div class="littleBox" data-bind="style: {backgroundColor: colorText}"></div> 

Per scoprire il motivo sarebbe necessario uno sguardo al codice sorgente.