5

Im trying to create a knockout binding to a jquery ui resizable widget. My custom binding is binding to 2 different observables on 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, when I resize my div using the left handle, 2 observables gets updated and thereby triggers 2 updates in the same binding. I need it to only trigger one update.

What are my options for this kind of binding? What is the recommended way to create a binding that binds to more than one observable?

My real world code is more complex, but I think iv boiled down my problem to this fiddle:

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

MatteS
  • 1,542
  • 1
  • 16
  • 35

1 Answers1

3

Have you tried using Michael Best's Knockout Deferred Updates Plugin?

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

All you need to do is include his .js file after knockout. 

<script type="text/javascript" src="knockout-2.1.0.js"></script>
<script type="text/javascript" src="knockout-deferred-updates.js"></script>
John Earles
  • 7,194
  • 2
  • 37
  • 35