javascript - 使用 Mithril 在运行时创建新元素

Question

使用 JavaScript 框架 Mithril，我尝试在创建和渲染初始主体之后添加新元素。

这是我最基本的问题:

let divArray = [];
let newDivButton = m('button', { onclick: ()=> {
    divArray.push(m('div', "NEW DIV PUSHED"));
}}, "Add new div");

divArray.push(newDivButton);
divArray.push(m('div', "NEW DIV PUSHED"));

let mainDiv = {
    view: () => {
        return divArray;
    }
}

m.mount(document.body, mainDiv);

上面的代码将创建一个按钮和一行行文本，内容为NEW DIV PUSHED。该按钮添加一个新文本元素，与第一个文本元素完全相同。这里的问题是，即使调用了 view 函数，这些附加元素也不会被渲染。我进入代码并清楚地看到我的 divArray 正在被填充，即使它们没有渲染。

我注意到的一件事是，初始文本元素(呈现的元素)的 dom 属性由实际的 div 对象填充。我的数组中的所有后续文本元素的 dom 属性都设置为 undefined。我不知道如何解决这个问题，但我确信它与我的问题有关。

Answer 1

Mithril 在渲染生命周期中内置了优化 - it won't re-render a DOM tree if the tree is identical to the last tree 。由于 divArray === divArray 始终为 true，因此节点永远不会重新渲染。

简单但非理想的解决方案是切片你的数组，这样你总是从mainDiv#view返回一个新数组，因此，Mithril将始终重新-渲染顶级数组:

let mainDiv = {
  view: () => {
    return divArray.slice();
  }
};

更正确的方法是映射数据，在 View 层创建 vnode，而不是在模块中静态保留 vnode 列表范围:

let data = ["Data Available Here"];
let mainDiv = {
  view: () => {
    return [
      m(
        'button',
        { onclick: () => data.push("Data Pushed Here") },
        "Add new div"
      );
    ].concat(
      data.map(datum => m('div', datum))
    );
  }
};