Ich benutze Dragula, um eine Reihe von Drag & Drop-Komponenten in Ember zu erstellen. Ich übergebe eine Liste von Elementen an einen übergeordneten Wrapper, der mehrere abfallbare Buckets enthält. Diese Liste von Elementen wird anfänglich gefiltert, sodass sie korrekte Elemente im richtigen Bucket darstellen. Dann wird Dragula verdrahtet, damit Gegenstände gezogen und fallen gelassen werden können. Wenn ein Drop-Ereignis auftritt, versuche ich das zugrunde liegende Ember-Objekt zu aktualisieren. Dies kann dazu führen, dass der Filter erneut angewendet wird und einige Rendervorgänge stattfinden. Das Problem ist, dass das DOM von Dragula manipuliert wurde und nicht das selbe ist, was Ember denkt, und DOM-Knoten verschwinden einfach.
Wie kann ich Ember und Dragula dazu bringen, nett zu spielen, wenn beide denken, dass ihnen das DOM und seine aktuelle Darstellung gehört? Ich habe versucht, das Draggle-Drop-Event abzubrechen und Ember dann Werte mit begrenztem Erfolg setzen zu lassen.
dnd-wrapper/template.hbs
dnd-wrapper/component.js
dnd-bucket/template.hbs
dnd-bucket/component.js
dnd-item/template.hbs
dnd-item/component.js
Online-Demo: Ссылка
GitHub Demo: Ссылка
Ich habe genau das gleiche Problem beschrieben, das Sie beschreiben. Ich habe Stunden damit verbracht, verschiedene Dinge auszuprobieren, um es zu beheben, und ich denke, dass ich schließlich eine hacky, aber praktikable Lösung gefunden habe. Das Fleisch davon ist, dass ich den 'Quelle'-Eimer zwingen musste, seine Gegenstände neu auszulösen, nachdem das Tropfen-Ereignis ausgelöst wurde.
Leider musste ich rohe Gewalt anwenden, um wieder zur Arbeit zu kommen. Der Aufruf von render auf einer der Elternansichten funktionierte nicht. Ember denkt, dass die Gegenstände, die aus dem DOM verschwunden sind, immer noch da sind und richtig wiedergegeben werden.
Ich habe die filteredItems-Liste in der dnd-Bucket-Vorlage mit {{#if listVisible}}{{/if}} umschlossen. Wenn Sie dann itemsVisible false und true setzen, wird die Liste neu gerendert und der DOM-Schaden repariert. Ich musste auch sicherstellen, dass diese Sets vorher und nachher in der Runloop gerendert wurden.
In meinem Fall habe ich resetView nach dem Update der Modelle im Drop-Callback ausgelöst. Obwohl dieses Update hacky ist, ist das visuelle Ergebnis akzeptabel. Wenn DOM-Elemente verschwinden, werden sie ersetzt, was ein wenig störend ist. Aber für 99,9% der Fälle, in denen keine DOM-Elemente verloren gingen, gibt es keine visuellen Fehler.