title: How to data bind to the CSS top, left, width, and height of a DOM element?
body: <p>I'm trying to use KnockoutJS to build an interactive dashboard with data bindings on different aspects of the <code>style</code> property; namely <code>left</code>, <code>top</code>, <code>width</code>, and <code>height</code>. For example, I'm using JQuery UI along with ui-draggable and ui-resizable effects to enable users to drag panels around on a canvas and resize them however they see fit. Without KnockoutJS, I was simply iterating over each div and stealing these properties from the dom element. I'm sure there's a better way using KnockoutJS, right? </p>
  
  <p>To explain my problem a little better, consider two panels side by side: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id='dashboard'&gt; 
    &lt;div id='panel1' class='ui-draggable ui-resizable' data-bind='?????'&gt; 
      &lt;!-- content goes here --&gt;
    &lt;/div&gt; 
    &lt;div id='panel2' class='ui-draggable ui-resizable' data-bind='?????'&gt; 
      &lt;!-- content goes here --&gt; 
    &lt;/div&gt; 
    &lt;button data-bind='click: send'&gt;Update&lt;/button&gt; 
  &lt;/div&gt; 
  </code></pre>
  
  <p>My view model looks something like this (note: pseudo coded for brevity): </p>
  
  <pre><code>var viewModel = { 
    panels: [ 
     { id: 'panel1', left: 0, top: 0, width: 50; height: 50 }, 
     { id: 'panel2', left: 50, top: 0, width: 50; height: 50 } ], 
    send: function() { 
     ko.utils.postJson( location.href , { panels: this.panels } ); 
    } 
  }; 
  ko.applyBindings( '#dashboard', viewModel ); 
  </code></pre>
  
  <p>I'd like to bind it in such a way that when the user sizes any of the div elements (ie. the panels), that it would then update the underlying viewModel using the built in data binding <code>OnMouseUp</code>. Then when the user clicks the "Update" button, I would then post the coordinates to the server. </p>
  
  <p>I'm thinking it might have something to do with custom templates, but even there I ran into some complexities that I couldn't quite grasp in managing the mouse events on each panel. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script type='text/html' id='panelTemplate'&gt;
      &lt;div class='ui-draggable ui-resizable' 
           style='top: ${ top }; left: ${ left }; width: ${ width }px; height: ${ height }px;'&gt;
          &lt;!-- content goes here --&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Ideas?</p>