0

したがって、ノックアウトテンプレートがあり、次のようになります。

<tbody data-bind='foreach: PrizeFulfilmentStatuses'>
            <tr >
                <td><input data-bind='value: Description' /></td> 
                <td><input data-bind='value: Order' /></td>
                <td><input type="checkbox" data-bind="checked: Editable"/></td> 
                <td> <div data-bind = "attr:{color:ColorHex },style:{backgroundcolor: ColorHex}, value: ColorHex"  class="colorpickerHolder"  style="height:30px; border: transparent; width: 30px;"></div> </td>
            </tr>
        </tbody>

これで、最後の TD の多くのプロパティに ColorHex が割り当てられていることがわかります。さて、これは私が何かを理解しようとした結果です。

どうやら、Editable や description などの他のすべてのオブザーバブルは双方向バインディングであるため、UI の値を変更するとオブザーバブルも変更され、データをサーバーに POST すると変更が反映されます。ColorHex はありません。サーバーに送信される値は、サーバーから最初に送信された元の値です。ここでは変更は反映されません。

以下は、ColorHex にバインドされたプロパティを変更するコードです。これは、カラーピッカー Jquery プラグインです。

self.ApplyColorPicker = function () {
            var $target = $(this);
            $(this).css("background-color", $(this).attr('color'));
            $(this).ColorPicker({
                color: $(this).attr('color'),
                onShow: function (colpkr) {
                    $(colpkr).fadeIn(500);
                    return false;
                },
                onHide: function (colpkr) {
                    $(colpkr).fadeOut(500);
                    return false;
                },
                onChange: function (hsb, hex, rgb) {
                    $target.css('backgroundColor', '#' + hex);
                    $target.attr('value', '#' + hex);
                }
            });
        };

次の 2 行が表示されます。

$target.css('backgroundColor', '#' + hex);
                        $target.attr('value', '#' + hex);

それらが実行されると、「背景色」と値の両方の値が変更されていることがfirebugでわかります。ただし、値を投稿する場合、または更新された値ではなく古い値を投稿する場合。

なぜ何か提案はありますか？

4

1 に答える 1

2

ノックアウトは、JavaScriptを介して値を編集するタイミングを認識していません。http://jsfiddle.net/UkJ6R/を使用して、KO変数を手動で更新する必要がありますko.dataFor($target[0]).ColorHex('#' + hex)。

backgroundColorまた、代わりに使用するようにスタイルバインディングを修正し、 onChangeKOがこれらの属性を更新するため、メソッド内の他の2行を削除しました。

于 2012-09-09T22:08:44.660 に答える