knockout.js - Knockout 是否支持样式的双向绑定(bind)？

Question

例如，我想将 View 模型中的一个属性绑定(bind)到一个元素的高度，这样如果它的高度发生变化，它就会更新该属性。 我读了这个例子，但它只显示了一个方向绑定(bind): http://knockoutjs.com/documentation/style-binding.html ，这意味着更新属性将更新样式，但不会更新其他样式。

我想做的是这样的:

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

在 View 模型中: self.chatParentHeight = ko.observable(); self.chatHeight = self.chatParentHeight();

所以父元素的高度会被监控变化，如果发生变化，它也会改变子元素的高度，因为它是绑定(bind)到它的。但是当高度样式更新时，viewmodel 并没有更新。我也尝试使用 backgroundColor 来简化它，但效果不佳。

Answer 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 绑定(bind)不是双向的，但它也是"is"的，因为您可以编写 custom binding handler自己做。

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