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

Posted 2023-05-09

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

【英文标题】：How to force Mithril to redraw without diffing? (integrating dragula in Mithril)

【发布时间】：2020-07-24 01:17:55

【问题描述】：

我正在将一个基于 JQuery 的应用程序翻译成 Mithril。该应用使用 Dragula 允许拖放以重新排序列表。

Dragula 对 DOM 中的 li 元素重新排序。 触发 Drop 事件后，我同步模型并调用 m.redraw()。

但是，UI 最终处于混合状态：

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

在用户将 1 拖到 0 之前，结果如下：

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

试过了：

m.redraw()、m.redraw.sync()，它们可以正常工作，但如果 ie。 LI 由 Dragula 移动，然后生成的 html 处于混合状态。

清除 vnode 中的 dom，希望能重新创建它。

清除vmode.dom.textContent 为小部件容器和不同的 LI 分配随机键和 ID

...没有任何变化，要么我得到一个空白小部件，要么“data-idx”中的值仍然错误。

所以我的问题是，一般来说，是否有可能以及如何使用这些操作秘银小部件内部 html 的库，然后调用 m.redraw() 以便秘银重新呈现混乱？

背景：

Dragula 在 oncreate 中初始化

我的小部件安装了路由：

“/视频”：

    onmatch: () => loginWall(true),
    render: v => m(layoutWidget, m(videosWidget, v.attrs))
,

【参考方案1】：

这是一篇较早的帖子，但也许您可以在videosWidget 中提供有关如何创建组件的更多信息。 Mithril 通常需要一个键来区分元素，以便在模型列表更改时保持当前的 dom 状态，如下所述： keys.