Knockout和JQueryUI Drag - 导致此元素无法拖动的原因是什么？

Question

我正在尝试在使用Knockout.js的项目中创建一个可拖动的列表项.

我正在使用下面的代码,你可以看到它非常简单:

<div id="room-view" >
    <ul data-bind="foreach: rooms">                     
        <li data-bind="text: name" class="draggable room-shape"></li>                   
    </ul>               
</div> 

<script type="text/javascript">
    $(function() {
        $( ".draggable" ).draggable();
    });
</script>

'room'列表渲染得很好,但没有一个项目是可拖动的.但是,如果我将'draggable'类应用于页面上的任何其他元素 - 它将变为可拖动.即使它们是其他列表项.唯一的区别是这些列表项是通过'foreach'绑定创建的.

任何人都可以发现可能导致其无法正常工作的原因吗？

Answer 1

foreach通过保存元素的副本来工作,以便在需要呈现项目时用作"模板".因此,您可拖动的元素不是由渲染的元素foreach.

您可以尝试确保draggable在之后调用applyBindings,但只有在您rooms不是更改的observableArray时才会生效.呈现的任何新项目都不可拖动.

另一种选择是使用afterRender选项来调用draggable元素.

更好的方法是使用自定义绑定.它可以很简单:

ko.bindingHandlers.draggable = {
   init: function(element) {
       $(element).draggable();
   }
};

或者你可以根据你的项目被删除的位置实际更新observableArray.

我在这里写了一篇文章.使用Knockout 2.0,我进行了一些更改以简化绑定,以便您可以sortableList在父级上使用.

以下是可排序的示例:http://jsfiddle.net/rniemeyer/DVRVQ/

这是一个在列表之间删除的示例:http://jsfiddle.net/rniemeyer/sBHaP/

Answer 2

问题是draggable()当文档在现有元素上准备就绪时应用.Knockout.js将修改HTML并在开始时以及rooms更新阵列时创建新元素.

您需要的是每次room-view渲染时启用拖动 .你可以用afterRender它.

试试这个:

<div id="room-view" >
  <ul data-bind="foreach: { data: rooms, afterRender: afterRender }">                     
    <li data-bind="text: name" class="draggable room-shape"></li>                   
  </ul>               
</div> 

<script type="text/javascript">
  // this is your already existing view-model that contains rooms, etc
  function roomsViewModel() {
    // ...

    // insert this in your view-model
    this.afterRender = function() {
      $( ".draggable" ).draggable();
    }
  }

  ko.applyBindings(new roomsViewModel());
</script>