如何将数据绑定到DOM元素的CSS顶部,左侧,宽度和高度？

Question

我正在尝试使用KnockoutJS来构建一个交互式仪表板,其中包含style属性不同方面的数据绑定; 即left,top,width,和height.例如,我正在使用JQuery UI以及ui-draggable和ui-resizable效果,使用户能够在画布上拖动面板并调整它们的大小.没有KnockoutJS,我只是迭代每个div并从dom元素中窃取这些属性.我确信使用KnockoutJS有更好的方法,对吗？

为了更好地解释我的问题,请考虑两个面板并排:

<div id='dashboard'> 
  <div id='panel1' class='ui-draggable ui-resizable' data-bind='?????'> 
    <!-- content goes here -->
  </div> 
  <div id='panel2' class='ui-draggable ui-resizable' data-bind='?????'> 
    <!-- content goes here --> 
  </div> 
  <button data-bind='click: send'>Update</button> 
</div> 

我的视图模型看起来像这样(注意:伪编码为了简洁):

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 ); 

我想以这样的方式绑定它:当用户调整任何div元素(即面板)的大小时,它会使用内置的数据绑定更新底层的viewModel OnMouseUp.然后,当用户单击"更新"按钮时,我会将坐标发布到服务器.

我认为它可能与自定义模板有关,但即使在那里我遇到了一些我在管理每个面板上的鼠标事件时无法完全掌握的复杂性.

<script type='text/html' id='panelTemplate'>
    <div class='ui-draggable ui-resizable' 
         style='top: ${ top }; left: ${ left }; width: ${ width }px; height: ${ height }px;'>
        <!-- content goes here -->
    </div>
</script>

想法？

Answer 1

随着时间的推移,我无法在JSFiddle中看到Green的解决方案,而Awais的解决方案看起来有点长,所以我更多地了解了它.

我发现以下绑定用于设置宽度.parens和'px'似乎很重要.在我的例子中,'AWidth'是div标签的宽度.

data-bind="style: {width: AWidth() + 'px'}"