淘汰赛风格绑定：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不设置背景颜色？

回答

相关问题