Question

例如，我想将viewmodel中的属性绑定到元素的高度，因此如果其高度发生更改，则会更新该属性。我读了这个例子，但它只显示了一个方向绑定： 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来简化它，但它也不起作用。

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绑定不是双向的，但是再次它也是“是”，因为你可以写一个custom binding handler来自己做。

如果您的问题实际上不同，请详细了解如何将两个高度相关联，请查看the other answer。

Answer 2

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

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

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

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

2 个答案: