我试图创建一个淘汰绑定到
jquery ui可调整大小的小部件.我的自定义绑定绑定到视图模型上的2个不同的可观察对象,即“left”和“width”.
<div class="layer" data-bind="resizable: {left: left,width: width}">
<div class="left ui-resizable-handle ui-resizable-w"><<<</div>
<div class="right ui-resizable-handle ui-resizable-e">>>></div>
</div>
ko.bindingHandlers.resizable = {
init: function(element,valueAccessor,allBindingsAccessor,viewmodel) {
var values = valueAccessor();
$(element).resizable({
handles: null,resize: function(event,ui) {
values.left(ui.position.left);
values.width(ui.size.width);
}
});
},update: function(element,viewmodel) {
var values = valueAccessor();
$(element)
.css('left',values.left() + 'px')
.css('width',values.width() + 'px')
;
}
};
var vm = {
left: ko.observable(50),width: ko.observable(300)
};
ko.applyBindings(vm);
问题是,当我使用左句柄调整div时,2个observable会更新,从而在同一个绑定中触发2次更新.我需要它才能触发一次更新.
我对这种绑定有什么选择？创建绑定到多个observable的绑定的推荐方法是什么？
我的真实世界代码更复杂,但我认为iv将我的问题归结为这个小提琴：
解决方法
你有没有尝试过使用Michael Best的Knockout
Deferred Updates Plugin？
这是一个更新的小提琴：http://jsfiddle.net/jearles/3dwVp/11/
您需要做的就是在淘汰赛后包含他的.js文件.
<script type="text/javascript" src="knockout-2.1.0.js"></script> <script type="text/javascript" src="knockout-deferred-updates.js"></script>
