javascript - 如何将数据绑定(bind)到 DOM 元素的 CSS 顶部、左侧、宽度和高度？

Question

我正在尝试使用 KnockoutJS 构建一个交互式仪表板，该仪表板在 style 属性的不同方面具有数据绑定(bind)；即 left、top、width 和 height。例如，我将 JQuery UI 与 ui-draggable 和 ui-resizable 效果一起使用，使用户能够在 Canvas 上四处拖动面板并根据他们认为合适的方式调整它们的大小。如果没有 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> 

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

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

我想以这样一种方式绑定(bind)它:当用户调整任何 div 元素(即面板)时，它会使用内置数据绑定(bind) OnMouseUp< 更新底层 viewModel/。然后当用户单击“更新”按钮时，我会将坐标发布到服务器。

我认为它可能与自定义模板有关，但即便如此，在管理每个面板上的鼠标事件时我也遇到了一些我无法完全掌握的复杂问题。

<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 的解决方案似乎有点长，所以我又仔细研究了一些。

我发现以下绑定(bind)适用于设置宽度。 parens 和 'px' 似乎很重要。在我的例子中，“AWidth”是 div 标签的宽度。

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