javascript - Knockout 可观察对象未观察到其中一项属性

Question

所以我确实有一个 knockout 模板，如下所示:

<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。现在，这是我试图弄清楚一些事情的结果。

显然，所有其他可观察量(例如“可编辑”和“描述”)都是两种方式绑定(bind)，这样，如果我更改 UI 上的任何值，那么可观察量也会更改，并且当我将数据发布回服务器时，更改会反射(reflect)回来。 ColorHex 不是。发布到服务器的值是最初来自服务器的原始值。这里没有反射(reflect)任何变化。

下面是更改绑定(bind)到 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 中看到“背景颜色”和值的值都在更改。但是，当涉及到发布值或发布旧值而不是更新值时。

有什么建议吗？

Answer 1

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

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