Aurelia Jquery-UI可排序通信

Question

我正在嘗試使用aurelia實現可排序列表功能形式的jquery-ui。 用來自dom的新訂單更新項目（在aurelia控制器內部）的最佳方法是什么？ 這是“ 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]）創建一個新數組。 然后遍歷此數組，並根據其索引將控制器中原始“ item”數組的項推入新數組。 但是，這似乎很笨拙且性能不佳。

有沒有更優雅的解決方案？

Answer 1

我們發現，Aurelia並不真正善待“其他人”，將DOM放在鼻子下面。 （從內存中）為我們打破的特定情況是當您拖動該項目並將其返回到其原始位置時。

我們所做的是將一個用於“ sortstop”的事件處理程序附加到可排序組件，事件處理程序執行了此操作（這是Typescript）-items是我們綁定到的項目列表，而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表現正確。