如何强制秘银重绘而不进行差异化？ （在秘银中整合德拉古拉）

Question

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)) },

Answer 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 .