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 オブザーバブルは変更されますが、背景色は設定されません。ただし、代わりに前景色を変更しようとすると、Chrome、Safari、Firefox のすべてで機能します。IEは試していません。

ここでプログラミングを誤解していますか？それとも、これは knockout.js のバグですか? それともFirefoxのバグ？スタイル データ バインディングの使用方法とは関係ないようです。

ここでjsfiddle

4

2 に答える 2

22

backgroundColorの代わりに属性を使用する必要がありbackground-colorます。

ライブデモ。

これはノックアウト固有のものではありません。関連する KO ソース コード ファイルでわかるように、バインディングは次のようにスタイルを設定します。

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

element.style[...]両方のコンソール ウィンドウで次のように入力するとわかるように、Firefox は Chrome とは異なるこの構文を処理します。

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

これは Firefox ではなく Chrome で機能します。(興味深いことに、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 に答える