淘汰赛风格绑定：Firefox 不设置背景颜色？答案

【问题标题】：Knockout style binding: firefox doesn't set background-color?淘汰赛风格绑定：Firefox 不设置背景颜色？
【发布时间】：2013-10-31 03:50:28
【问题描述】：

当我尝试使用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 错误？还是 Firefox 错误？好像和How to use the style data bindings?没有任何关系

jsfiddle here

【问题讨论】：

标签： css firefox knockout.js

【解决方案1】：

您应该使用backgroundColor 属性而不是background-color。

直播Demo。

这不是特定于淘汰赛的事情。在the relevant KO source code file 中可以看到，绑定设置样式如下：

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

Firefox 处理这种element.style[...] 语法与 Chrome 不同，如果您在两个控制台窗口中键入以下内容即可看出：

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

这适用于 Chrome，不适用于 Firefox。（有趣的是，它也适用于 IE11。）

【讨论】：

谢谢！我不知道替代属性命名约定。你赢了一分钟。还要感谢 Tomalak。
有趣！我做了一些进一步的调查，并冒昧地将我的发现添加到@sinanakyazici 的答案中。
@Jeroen 很好的发现。我以为我在 KO 源代码的某处看到了 dashed-name 到 propertyName 的转换函数，所以我认为他们会做“正确的事情”。显然他们没有。

【解决方案2】：

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

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

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

【讨论】：