当我尝试使用样式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的错误？这与KnockoutJS style bindings – what am I doing wrong?似乎没有任何关系
jsfiddle here
解决方法
你应该使用backgroundColor属性而不是background-color.
活Demo.
这不是一个特定于敲门的事情.从the relevant KO source code file可以看出,绑定设置如下：
element.style[styleName] = styleValue || "";
Firefox处理与Chrome相同的element.style […]语法,可以看到如果在两个控制台窗口中键入以下内容：
document.body.style['background-color'] = 'red'
这可以在Chrome中运行,而不是在Firefox. (有趣的是,它也适用于IE11.)
