Стиль привязки нокаутом: firefox не устанавливает фоновый цвет?

Когда я пытаюсь изменить цвет фона маленькой коробки, используя привязку 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, цвет фона маленькой коробки меняется при вводе текста в поле ввода. Но не в Firefox 24.0 на Mac; наблюдаемые изменения colorText, но цвет фона никогда не устанавливается. Однако, если я попытаюсь изменить цвет переднего плана, это работает во всех браузерах Chrome, Safari и Firefox. Я не пробовал IE.

Неужели я не понимаю здесь программирования? Или это ошибка knockout.js? Или ошибка Firefox? Это не похоже на Как использовать привязки данных стиля?

jsfiddle здесь

Ответ 1

Вместо background-color вы должны использовать атрибут backgroundColor.

Live Демо.

Это не нокаут-специфическая вещь. Как видно из соответствующего файла исходного кода KO, привязка устанавливает стиль следующим образом:

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

Firefox обрабатывает этот синтаксис element.style[...], отличный от Chrome, как можно видеть, если вы наберете следующее в обоих консольных окнах:

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

Это работает в Chrome, а не в Firefox. (Интересно, что он также работает в IE11.)

Ответ 2

Использование альтернативного синтаксиса для определения имен классов CSS работает в Firefox:

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

Чтобы узнать причину, вам понадобится исходный код.