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的错误？还是Firefox的bug？它似乎与How to use the style data bindings?

无关

jsfiddle here

Answer 1

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

直播Demo。

这不是特定于Knockout的事情。从the relevant KO source code file中可以看出，绑定设置样式如下：

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

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

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

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

Answer 2

使用替代语法定义CSS类名称可在Firefox中使用：

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

找出原因，查看源代码是必要的。

淘汰赛样式绑定：firefox没有设置背景颜色？

2 个答案: