Как обновить DOM после его изменения Maquette

Question

Как упоминалось ранее, я хочу использовать Maquette в качестве базового языка гиперподписки. Следовательно, я не хочу использовать maquette.projector, Однако, несмотря на возможность добавления объектов SVG, созданных с помощью Maquette, к DOM, DOM, похоже, не обновляется. Например, в приведенном ниже коде я ожидаю, что смогу нажать кнопку, чтобы создать круг. Если я проверю DOM с помощью инструментов Chrome Dev, я смогу добавить объект круга 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 для рендеринга узлов, которые начинаются в HTML со встроенным SVG, вам не нужно об этом беспокоиться.

Но теперь вы начинаете внутри SVG, создавая <g> узел. Макетт предполагает, что вам нужен "нестандартный" HTML <g> Узел, потому что он не знает, что вы были внутри SVG.

Вот почему Макетт предоставляет второй аргумент DOM.create метод, который вы можете использовать следующим образом, чтобы решить вашу проблему:

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