javascript - Maquette 修改后如何更新 DOM

Question

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);
});

<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>

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

Answer 1

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

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

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

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

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