我想要做的是跟踪 (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 特定的答案。