Knockout is configurable for 2 observables that are updated twice

Question

I am trying to create a knockout binding to jquery ui resizable widget. My user binding is tied to two different observables in the view model, namely "left" and "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, valueAccessor, allBindingsAccessor, 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); 

The problem is that when I resize the div using the left descriptor, 2 observables are updated and thereby trigger 2 updates in the same binding. I need it to cause only one update.

What are my options for such a binding? What is the recommended way to create a binding that binds to several observables?

My real world code is more complex, but I think iv dumped my problem on this fiddle:

http://jsfiddle.net/MatteS75/3dwVp/10/

Answer 1

Have you tried using the Michael Best Knockout Pending Updates Plugin ?

Here is the updated fiddle: http://jsfiddle.net/jearles/3dwVp/11/

All you have to do is include its .js file after the knockout.

 <script type="text/javascript" src="knockout-2.1.0.js"></script> <script type="text/javascript" src="knockout-deferred-updates.js"></script>