Aurelia Jquery-UI Sortierbare Kommunikation

Question

Ich versuche, die sortierbare Liste Feature-Formular jquery-ui mit Aurelia zu implementieren. Was ist der beste Weg, um die Artikel (innerhalb Aurelia Controller) mit der neuen Bestellung von der Dom aktualisieren? Ist "Ref" eine Annäherung hier? Einfaches Umsortieren der Listenelemente in dom, aber wie werden die Änderungen auf das aurelia-list-Objekt angewendet?

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

Ein Ansatz wäre den $ Index auf das li-Element zu befestigen, so dass sie mit jquery lesen, nachdem der Auftrag ein neues Array mit dem Auftrag ([0,3,1,2]) wurde geändert und erstellen . Dann iteriere dieses Array und schiebe die Items des originalen "item" -Arrays im Controller auf ein neues Array entsprechend ihrem Index. Dies scheint jedoch eher klobig und unperformant.

Gibt es eine elegantere Lösung?

Answer 1

Wir fanden heraus, dass Aurelia nicht wirklich freundlich zu "anderen" ist, die das DOM unter seiner Nase neu arrangieren. Der spezielle Fall, der für uns (aus dem Gedächtnis) gebrochen wurde, war, wenn Sie den Gegenstand herumziehen und ihn zu seiner ursprünglichen Position zurückbringen.

Wir haben einen Event-Handler für "sortstop" an die sortierbare Komponente angehängt, und der Event-Handler tat dies (das ist Typescript) - Elemente sind unsere Liste von Elementen, an die wir gebunden haben, und refSortable ist die Sortierung element:

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

Ich werde nicht sagen, dass es elegant ist, aber Aurelia verhält sich richtig.