如何在Maquette修改DOM後更新DOM

As mentioned previously，我想使用Maquette作爲基本的hyperscript語言。因此，我不想使用maquette.projector。但是，儘管能夠將使用Maquette製作的SVG對象附加到DOM，但DOM似乎沒有更新。例如，在下面的代碼中，我希望能夠點擊一個按鈕來創建一個圓圈。如果我使用Chrome開發工具檢查DOM，我可以將SVG圓對象添加到DOM，但DOM尚未更新。我應該如何更新DOM？如何在Maquette修改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不渲染什麼嗎？

來源

2017-02-27 Seanny123

這是一個艱難的。圓圈沒有出現在屏幕上的原因（儘管它被添加到DOM）與XML命名空間有關。

SVG元素及其後代應該得到SVG XML命名空間。當您使用maquette渲染以嵌入式SVG爲HTML開始的節點時，您不必擔心這一點。

但是現在您通過創建一個<g>節點開始在SVG內部。 Maquette假定你需要一個'非標準'的HTML <g>節點，因爲它不知道你在SVG內部。

這就是爲什麼初步設計的模型提供了第二個參數的DOM.create方法，你可以用如下解決您的問題：

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

來源

2017-02-27 13:18:08

如何在Maquette修改DOM後更新DOM

回答

相關問題