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

One of the property is not being observed by Knockout observable

本文关键字：属性 一个 observable 观察 Knockout      更新时间：2023-09-26

所以我有一个敲除模板，它看起来如下：

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

你可以看到这两条线：

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

当执行这些操作时，我可以在firebug中看到"背景色"和值都在更改。但当涉及到发布值或发布旧值而不是更新值时。

有什么建议吗？

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

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

相关文章：