Knockout 是否支持样式的双向绑定？答案

【问题标题】：Does Knockout support bi-directional binding to styles?Knockout 是否支持样式的双向绑定？
【发布时间】：2014-12-31 13:18:06
【问题描述】：

例如，我想将视图模型中的一个属性绑定到一个元素的高度，因此如果它的高度发生变化，它会更新该属性。我读了这个例子，但它只显示了一个方向绑定： http://knockoutjs.com/documentation/style-binding.html ，表示更新属性会更新样式，否则不会。

我想做的是这样的：

<div class="panel-body" data-bind="style: {height: chatParentHeight}">
   <div data-bind="style: { height: chatHeight}">
   </div>
</div>

在视图模型中： self.chatParentHeight = ko.observable(); self.chatHeight = self.chatParentHeight();

因此，父元素的高度会受到监控，如果发生变化，它也会更改子元素的高度，因为它已绑定到它。但是更新高度样式时不会更新视图模型。我也尝试使用 backgroundColor 来简化它，但效果不佳。

【问题讨论】：

这有点乐观是不是 :D 你必须为此创建一个自定义绑定
我花了很长时间才明白我必须这样写：data-bind="style: {height: chatParentHeight() +'px'}
嘿嘿，我曾经为那个挣扎过。虽然我建议为此使用 ViewModel，但您可以对其进行单元测试并保持视图更清晰。
正是我所做的！谢谢。

标签： knockout.js bidirectional

【解决方案1】：

您的标题中的问题可以使用 Knockout 源来回答：它是开放的，实际上很容易通过。引用the relevant file：

ko.bindingHandlers['style'] = {
    'update': function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor() || {});
        ko.utils.objectForEach(value, function(styleName, styleValue) {
            styleValue = ko.utils.unwrapObservable(styleValue);

            if (styleValue === null || styleValue === undefined || styleValue === false) {
                // Empty string removes the value, whereas null/undefined have no effect
                styleValue = "";
            }

            element.style[styleName] = styleValue;
        });
    }
};

所以答案是“否”：style 绑定不是双向的，但同样也是“是”，因为您可以自己编写 custom binding handler 来执行此操作。

如果您的问题实际上不同，更多关于如何关联两个高度的信息，请查看the other answer。

【讨论】：

【解决方案2】：

当然可以只使用在您的视图模型中计算的 ko。

self.chatParentHeight = ko.observable();
self.chatHeight = ko.computed(function(){
    return self.chatParentHeight();
});

子元素在您的视图模型中没有改变的原因是子元素根本不是可观察的，而是在创建视图模型时，它被分配了 self.chatParentHeight 的值。但是因为它实际上不是一个可观察的，所以当 chatParentheight 改变时 change 事件不会触发。 ko 计算对象创建一个依赖的 observable 来改变高度，并自动检测父高度何时改变并重新计算聊天高度的值

【讨论】：