Ability to inform miso of external DOM updates?

[liamoc]

Is your feature request related to a problem? Please describe. I am currently using Sortable.js (https://sortablejs.github.io/Sortable/) to make a nice easy drag-to-sort list of items. The way I make this cooperate with miso is to, in JS in the onEnd handler, call a custom event on the dragged item, and associating an action with that in the Miso view that updates the model by reordering the items. However, Sortable.js will mutate the DOM first, as the user drags stuff around, so Miso's view of the DOM will get out of sync with the real DOM here. Currently, my hack to make this work is to swap the DOM items back into their original order (bringing the model back in sync) before calling the event handler, but this means that, for a brief moment, the items revert back to their original order and then appear in the new order as required.

Describe the solution you'd like Ideally, I'd like a way to tell Miso that certain DOM elements have been externally changed and to update its model accordingly, so I can bring the virtual DOM in line with the real DOM rather than the other way around.

Describe alternatives you've considered I can't think of any alternative other than reimplementing the entire Sortable library in Miso (very difficult for all the features it has), or continuing with this undesirable swapping hack.

[dmjio]

Do you have a repo or a gist that I could repro the error here?

[liamoc]

Not at the moment, but I can make one fairly easily I think. I'll post back when I do.

[liamoc]

Hi @dmjio , I've added a minimal repro here. You'd need Sortable.js too of course:

https://gist.github.com/liamoc/97a92029233ad03f1ca9b97b4ff0e6c6

As you can see the list elements end up being displayed in a different order than they appear in the model.