title: Knockout custom resizable binding to 2 observables getting updated twice
body: <p>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".</p>
  
  <pre><code>&lt;div class="layer" data-bind="resizable: {left: left, width: width}"&gt;
  &lt;div class="left ui-resizable-handle ui-resizable-w"&gt;&lt;&lt;&lt;&lt;/div&gt;
  &lt;div class="right ui-resizable-handle ui-resizable-e"&gt;&gt;&gt;&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  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);
  </code></pre>
  
  <p>​
  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.</p>
  
  <p>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?</p>
  
  <p>My real world code is more complex, but I think iv boiled down my problem to this fiddle:</p>
  
  <p><a href="http://jsfiddle.net/MatteS75/3dwVp/10/" rel="noreferrer">http://jsfiddle.net/MatteS75/3dwVp/10/</a></p>