Question

所以我确实有一个淘汰模板，看起来如下：

<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上更改任何值，那么当我将数据发送回服务器时，observable也会被更改并反映出更改。 ColorHex不是。发布到服务器的值是最初来自服务器的原始值。这里没有反映出任何变化。

以下是更改绑定到ColorHex的属性的代码。它是一个colorpicker 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);
                }
            });
        };

你可以看到这两行：

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

当执行这些操作时，我可以在firebug中看到，“background-color”和value都会更改值。但是，当发布值或发布旧值而不是更新值时。

有什么建议吗？

Answer 1

Knockout不知道你何时通过javascript编辑值。您必须使用ko.dataFor($target[0]).ColorHex('#' + hex)：http://jsfiddle.net/UkJ6R/

手动更新KO变量

我还修改了您的样式绑定以使用backgroundColor，并删除了onChange方法中的其他两行，因为KO会为您更新这些属性。

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

1 个答案: