如何在重绘中保留 Mithril 中的 DOM 元素答案

【问题标题】：How to retain a DOM element in Mithril, across redraws如何在重绘中保留 Mithril 中的 DOM 元素
【发布时间】：2016-02-09 12:52:33
【问题描述】：

我想了解在 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 元素的正确方法吗？或者有没有实现这一目标的另一种方法？

谢谢。

【问题讨论】：

如果你能提供一个这种行为的 JS 小提琴将会很有帮助。同时，您可以尝试使用 {subtree: "retain"}。见：lhorie.github.io/mithril/mithril.render.html#subtree-directives
试试看秘银成分见：lhorie.github.io/mithril/components.html

标签： mithril.js virtual-dom

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

查看here了解更多详情

【讨论】：