ノックアウトスタイルバインディング：firefoxは背景色を設定していませんか？

Question

私は結合style knockout.js使用して小さなボックスの背景色変更しようとすると：

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

とJSでの：

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

それは私がChromeで期待と同じように動作し、サファリ、入力ボックスにテキストを入力すると、小さなボックスの背景色が変わります。しかし、MacではFirefox 24.0ではそうではありません。 colorTextの観測値は変更されますが、背景色は設定されません。ただし、代わりにフォアグラウンドカラーを変更しようとすると、Chrome、Safari、Firefoxのすべてで機能します。私はIEを試していない。

私はここでプログラミングを誤解していますか？またはこれはknockout.jsのバグですか？またはFirefoxのバグ？あなたが代わりにbackground-colorのbackgroundColor属性を使用する必要がありますHow to use the style data bindings?

jsfiddle here

Answer 1

を行うには何もしていないようです。

ライブDemo。

これはノックアウト特有のものではありません。 the relevant KO source code fileに見ることができるように、このような結合セットスタイル：

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

Firefoxは、両方のコンソールウィンドウに次のように入力した場合に見られるように、クロムは異なるこのelement.style[...]構文を処理します。

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

これはChromeでは動作しますが、Firefoxでは動作しません。 （興味深いことに、それはまた、IE11で動作します。）CSSクラス名を定義するために代替構文を使用し

Answer 2

はFirefoxで動作します。

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

は、ソースコードを見ては、必要となる理由を見つけるために。