14

当我尝试使用styleknockout.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 observable 发生变化，但从未设置背景颜色。但是，如果我尝试更改前景色，则适用于所有 Chrome、Safari 和 Firefox。我没有试过IE。

我误解了这里的编程吗？或者这是一个 knockout.js 错误？还是 Firefox 错误？这似乎与如何使用样式数据绑定无关？

jsfiddle在这里

4

2 回答 2

22

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

现场演示。

这不是特定于淘汰赛的事情。在相关的 KO 源代码文件中可以看到，绑定设置样式如下：

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

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

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

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

于 2013-10-22T10:42:01.187 回答
9

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

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

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

于 2013-10-22T10:42:57.607 回答