Knockout 样式绑定：火狐浏览器不设置背景颜色？

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和Safari中，当我在输入框中输入文字时，小方块的背景色会随着文本输入而改变，与我的预期一致。但是，在Mac上的Firefox 24.0上没有效果。colorText可观察对象发生了更改，但背景色未设置。然而，如果我尝试更改前景色，那么在Chrome、Safari和Firefox上都能正常工作。我还没有尝试IE。

我是否误解了这里的编程？或者这是一个knockout.js的bug？或者是Firefox的bug？似乎与如何使用style数据绑定无关。

jsfiddle 在这里

- emrys57

Answer 1

你应该使用backgroundColor属性替代background-color。

Live 演示。

这不是 Knockout 特有的事情。从相关的 KO 源代码文件可以看出，绑定会像这样设置样式：

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

Firefox和Chrome在处理这种element.style[...]语法时有所不同，通过在两个控制台窗口中键入以下内容可以看到：

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

这在Chrome中可以工作，但在Firefox中不行。（有趣的是，在IE11中也可以工作。）

- Sinan AKYAZICI

---

谢谢！我不知道有另一种属性命名约定。你比我快了一分钟，你赢了。也感谢Tomalak。 - emrys57

有趣！我进行了进一步的调查，并在@sinanakyazici的答案中添加了我的发现。 - Jeroen

@Jeroen 很不错的发现。我记得KO源码中有一个dashed-name到propertyName的转换函数，所以我认为他们会做“正确的事情”。显然他们没有。 - Tomalak

Answer 2

使用替代语法来定义CSS类名在Firefox中有效：

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

要找出原因，需要查看源代码。

- Tomalak