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> 

一つのアプローチは、リチウム項目に$インデックスを付けるためには、変更された後に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(); 
} 

私はそれがどんなストレッチでエレガントだとは言いませんが、それは正しく動作するアウレリアを取得します。