如何使用 Knockout 观看样式

Question

我想要做的是跟踪 (top, left, width, height, zIndex) 样式属性。但是由于包含这些样式的元素直到第三方代码被引入后才存在，所以我不能以正常方式进行。

这是我到目前为止所得到的：

    my.Module = function (module) {
    return {
            top: ko.observable(200);,
            left: ko.observable(100);,
            width: ko.observable(100);,
            height: ko.observable(100);,
            zIndex: ko.observable(0);,
        };
    };

这将是正常的绑定上下文：

<div data-bind="style:{width:width, top:top, left:left, height:height, zindex:zIndex}"></div>

但是第三方的东西最终包装了我在另一个中传递的 div，这是我无法改变的。因此，我开始创建自定义绑定处理程序：

 ko.bindingHandlers.Window = {
        init: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());

            //Do third party creation stuff here...

            ko.applyBindingsToNode(elemToActuallyWatch, {
                style: {
                    width: value.width() + 'px',
                    height: value.height() + 'px',
                    top: value.top() + 'px',
                    left: value.left() + 'px',
                    zIndex: value.zIndex()
                }
            });
        },

现在这会将上述样式应用于适当的 div，但是当数据更改和元素更改时，我仍然需要更改上述值。

我觉得不应该需要我必须在末端添加的“px”，但这是我可以让它们应用的唯一方法。

有没有办法从现在开始，假设我正在使用 jqueryUI 可拖动和调整大小，并且用户移动/调整元素的值将自动更新视图模型数据？当然最好是非 jquery 特定的答案。

Answer 1

style 是一种单向绑定，从模型到视图。它不会从视图更新模型。您可能需要使用 resize option 并从那里更新模型。