javascript - Aurelia Jquery-UI 可排序通信

Question

我正在尝试使用 aurelia 实现 jquery-ui 的可排序列表功能。使用 dom 的新订单更新项目(在 aurelia Controller 内)的最佳方法是什么？ “ref”是这里的一种方法吗？轻松地重新排序 dom 中的列表项，但如何将更改应用到 aurelia-list-object？

  <ul class="sortable">
    <li repeat.for="item of items">
       Stuff.
    </li>
  </ul>

一种方法是将 $index 附加到 li-item，在顺序更改后使用 jquery 读取它们，并使用顺序 ([0,3,1,2]) 创建一个新数组。然后迭代该数组，并根据其索引将 Controller 中原始“item”数组的项目推送到新数组。但这看起来相当笨重且性能不佳。

有更优雅的解决方案吗？

Answer 1

我们发现 Aurelia 并不真正喜欢“其他人”在它的 Nose 底下重新排列 DOM。对我们来说(根据内存)被破坏的具体情况是当您拖动该项目并将其返回到其原始位置时。

我们所做的是将“sortstop”的事件处理程序附加到可排序组件，事件处理程序执行此操作(这是 Typescript)——items 是我们绑定(bind)到的项目列表，refSortable 是可排序元素:

onStop( event: JQueryEventObject, ui: any ): boolean
{
  let endPos = ui.item.index( );
  let startPos = ui.item.data( "start_pos" );

  $( this.refSortable ).sortable( "cancel" );

  let movedItem = this.items[ startPos ];

  if( startPos === endPos )
  {
     // KLUDGE: even though the item has not moved, we need to create a new one to force Aurelia to rebind
     let newItem = new ExportListItem( movedItem.id, movedItem.caption, movedItem.sourceObject );

     movedItem = newItem;
  }

  this.items.splice( startPos, 1 );
  this.items.splice( endPos, 0, movedItem );

  // We end up with a duplicate DOM element that needs to be removed.
  ui.item.remove( );
}

我不会说它无论如何都很优雅，但它让 Aurelia 表现得正确。