淘汰賽風格綁定：firefox不設置背景顏色？

當我嘗試使用style knockout.js結合來改變一個小盒子的背景色：淘汰賽風格綁定：firefox不設置背景顏色？

<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和Safari，隨着我在輸入框中鍵入文本，小框的背景顏色發生變化。但不是在Mac上的Firefox 24.0上; colorText可觀察到的變化，但背景顏色從未設置。但是，如果我嘗試更改前景色，則適用於所有Chrome，Safari和Firefox。我還沒有試過IE。

我誤解了這裏的編程嗎？或者這是一個knockout.js錯誤？或者一個Firefox錯誤？這似乎並沒有被任何與How to use the style data bindings?

的jsfiddle here

來源

2013-10-22 emrys57

，您應該使用backgroundColor屬性，而不是background-color。

活Demo。

這不是一個基因敲除的具體事情。如可以在the relevant KO source code file可以看出，結合套風格是這樣的：

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

火狐處理這個element.style[...]語法Chrome的不同，這可如果鍵入兩個控制檯窗口下面可以看出：

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

這適用於Chrome，不適用於Firefox。（有趣的是，它也可以在IE11）

來源

2013-10-22 10:42:01 sinanakyazici

謝謝！我不知道替代屬性命名約定。你贏了一分鐘。還要感謝Tomalak。 – emrys57

有趣！我已經做了一些進一步的調查，並冒昧將我的發現加入@ sinanakyazici的回答。 – Jeroen

@Jeroen非常好的發現。我以爲我在KO源代碼的某處看到了一個'dashed-name'到'propertyName'轉換函數，所以我認爲他們會做「正確的事情」。顯然他們沒有。 – Tomalak

使用替代語法定義CSS類名在Firefox：

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

要找出一看源代碼是必要的原因。

來源

2013-10-22 10:42:57 Tomalak

淘汰賽風格綁定：firefox不設置背景顏色？

回答

相關問題