如何迫使秘银重画而无差异？ （将德拉古拉整合到秘银中）

Question

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

• Dragula将DOM中的li元素重新排序。
• 当引发Drop事件时，我同步模型并调用m.redraw（）。

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

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

并且用户在0之前拖动1后，其结果为：

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

尝试：

• m.redraw（），m.redraw.sync（），它们可以正常工作，但如果LI通过dragula移动，然后生成的HTML处于混合状态。

• 清除dom中的vnode，希望可以重新创建。

• 清除vmode.dom.textContent
• 将随机密钥和ID分配给窗口小部件容器以及不同的LI

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

因此，我的问题通常是，有可能，以及如何使用这些类型的库来操纵秘银小部件内部html，然后调用m.redraw（）以便秘银重新渲染混乱？

背景：

• Dragula在oncreate中初始化

• 我的小部件已通过路由安装：

  “ / videos”：{

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

Answer 1

这是一个较旧的文章，但您可以在videosWidget中提供有关如何创建组件的更多信息。秘银通常需要一个密钥来区分元素，以便在模型列表更改时保持当前dom状态，如下所述：keys。