其中一个属性没有被Knockout观察到

Question

So I do have a knock out template and it looks like following:

<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>

Now, you can see that a lot of properties in the last TD are being assigned ColorHex. Now, this is result of me trying to figure out something.

Apparantly, all the other observables like Editable and description are two way bindings such that if I change any value on the UI then the observable is also changed and change is reflected back when I POST the data back to the server. ColorHex is not. The value posted to the server is the original value that originally came from the server. No changes are reflected here.

following is the code that changes the properties bound to ColorHex. It is a colorpicker Jquery plugin:

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);
                }
            });
        };

You can see those two lines:

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

when those are executed, I can see in firebug that values are being changed both for "background-color" and value. But when it comes to posting the value or Posts the old value NOT the updated value.

Any suggestions why?

Answer 1

Knockout doesn't know when you edit the value via javascript. You'll have to manually update the KO variable using ko.dataFor($target[0]).ColorHex('#' + hex) : http://jsfiddle.net/UkJ6R/

I also fixed your style binding to use backgroundColor instead and removed the other two lines in the onChange method because KO will update those attributes for you.