Maquette 修改后如何更新 DOM答案

【问题标题】：How to update DOM after Maquette modifies itMaquette 修改后如何更新 DOM
【发布时间】：2017-07-18 00:43:52
【问题描述】：

As mentioned previously，我想使用 Maquette 作为基本的超脚本语言。因此，我不想使用maquette.projector。然而，尽管能够将使用 Maquette 制作的 SVG 对象附加到 DOM，但 DOM 似乎并没有更新。例如，在下面的代码中，我希望能够单击一个按钮来创建一个圆圈。如果我使用 Chrome 开发工具检查 DOM，我可以将 SVG 圆对象添加到 DOM，但 DOM 尚未更新。我应该如何更新 DOM？

var h = maquette.h;
var dom = maquette.dom;
var svg;
var svgNode;
var root;
var rootDiv;

function addCircle(evt) {
  console.log("adding circle");
  const c = h('g', [
              h('circle#cool.sweet', {cx: '100', cy: '100', r: '100', fill: 'red'}),
            ]);
  const g = dom.create(c).domNode;
  svgNode.appendChild(g);
}

document.addEventListener('DOMContentLoaded', function () {
  svg = h('svg', {styles: {height: "200px", width: "200px"}})
  rootDiv = h('div.sweet', [
    svg,
  ]);
  root = dom.create(rootDiv).domNode;
  document.body.appendChild(root);
  svgNode = root.querySelector("svg");
  
  const button = h('button', {
    onclick: addCircle,
  }, ["Add circle"]);
  
  const buttonNode = dom.create(button).domNode;
  root.appendChild(buttonNode);
});

&lt;script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"&gt;&lt;/script&gt;

为什么appendChild 没有渲染任何东西？

【问题讨论】：

标签： javascript typescript svg virtual-dom maquette

【解决方案1】：

这是一个艰难的过程。圆圈没有出现在屏幕上的原因（尽管它已添加到 DOM）与 XML 命名空间有关。

SVG 元素及其后代应该获得 SVG XML 命名空间。当您使用 maquette 渲染以 HTML 开头并带有嵌入式 SVG 的节点时，您不必担心这一点。

但现在您通过创建<g> 节点开始在 SVG 内部。 Maquette 假定您需要一个“非标准”HTML <g> 节点，因为它不知道您在 SVG 中。

这就是为什么 maquette 为其 DOM.create 方法提供第二个参数的原因，您可以使用以下方法来解决您的问题：

const g = dom.create(c, {namespace: 'http://www.w3.org/2000/svg'}).domNode;

【讨论】：