0

I am translating a JQuery-based app to Mithril. That app uses Dragula to allow drag/drop to reorder lists.

  • Dragula reorders the li elements in the DOM.
  • When the Drop event is fired, I sync the model and call m.redraw().

However, the UI ends up in a mixed state:

<li data-idx="0"> The Zero </li>
<li data-idx="1"> The One </li>

and after user dragging 1 before 0, it ends up as:

<li data-idx="1"> The One</li>
<li data-idx="0"> The Zero</li>

Tried:

  • m.redraw(), m.redraw.sync(), they correctly work but if ie. the LIs are moved by dragula, then the resulting HTML is in a mixed state.

  • clearing dom in vnode with the hope it would be recreated.

  • clearing vmode.dom.textContent

  • Assign random keys and IDs to the widget container, and to the different LIs

... And nothing changes, either I get a blank widget or the values in "data-idx" are still wrong.

So my question is, in general, is it possible, and how, to use these kind of libraries that manipulate a mithril widget inner html, and then call m.redraw() so mithril re-renders the mess ?

Background:

  • Dragula is initialized in oncreate
  • My widgets are mounted with route:
"/videos": {
    onmatch: () => loginWall(true),
    render: v => m(layoutWidget, m(videosWidget, v.attrs))
},
Dolan
  • 313
  • 1
  • 4
  • 14
rupps
  • 9,712
  • 4
  • 55
  • 95

1 Answers1

1

This is an older post but maybe you could provide more information about how the components are created in the videosWidget. Mithril usually needs a key to distinguish between elements so that the current dom state is maintained as the model list changes as explained here: keys.

Ian Wilson
  • 6,223
  • 1
  • 16
  • 24
  • Hi ! Thanks for the answer. Please ignore this question .... I was doing things in an anti-pattern way. Still today Mithril is my favourite engine :) – rupps Feb 03 '23 at 13:49