mithril.js - 如何在重绘中保留 Mithril 中的 DOM 元素

Question

我想知道，在 Mithril 中，跨重绘保留 DOM 元素的最佳做法是什么。

我有一个 iframe，其中包含一个导航链接，因为它的内容。我需要在 Mithril 的重绘中保留这个 iframe。

我已经尝试了以下解决方案，其中 iframe 在组件的控制器函数中使用 redraw.stategy 设置为“none”来呈现。

var iframeComponent = {
     controller: function() {
         m.redraw.strategy("none") 
     },

     view: function() {
              return m('.backpane-container', [
        m('iframe#bpaneId.backpane-frame[frameborder=0][scrolling=yes]', {

          'src': url,
          'config': configureBackPane.bind(this, controller)
        }),

      ]);
     }

但是，iframe 似乎在重绘时发生了变化：

这是保留 DOM 元素的正确方法吗？还是有另一种方法来实现这一目标？

谢谢你。

Answer 1

在您的情况下，您可以使用key-attribute 来保留 iframe 元素。它将 DOM 节点连接到 vDOM 节点。因此，即使它们改变位置，节点也会原地移动并且不会重新创建。

看到这里更多细节

Answer 2

我已经更改了将 iframe 添加到虚拟 DOM 的兄弟元素的顺序。这导致差异引擎重绘。

更改渲染 DOM 元素的顺序解决了我的问题。