カスタムaurelia atttributeでのDOM操作の簡略

単純なDOM操作をテストすることでAureliaカスタム属性を試しています。カスタムaurelia atttributeでのDOM操作の簡略

私の驚いたことに、親svgノードに楕円ノードを追加して操作すると、HTMLは変更されますが、楕円はレンダリングされません。

innerHtmlプロパティを操作すると、正常に動作します。

import { bindable, inject} from 'aureliaframework'; 
 

 
@inject(Element) 
 
export class TestCustomAttribute { 
 

 
    constructor(private element: SVGElement) { 
 
    } 
 
    attached() 
 
    { 
 
     var ellipse = document.createElement("ellipse"); 
 
     ellipse.setAttribute("cx","200"); 
 
     ellipse.setAttribute("cy","200"); 
 
     ellipse.setAttribute("rx","100") 
 
     ellipse.setAttribute("ry","100") 
 
     ellipse.setAttribute("style","fill:blue") 
 

 
     //this is rendered 
 
     this.element.innerHTML = "<ellipse style='fill: purple' cx='200' cy='200' rx='100' ry='100'></ellipse>" 
 
      
 
     //this shows on DOM explorer but not rendered 
 
     this.element.appendChild(ellipse) 
 
    }

はそれがappendNode（）の代わりに、要素のinnerHTMLを操作を使用して所望の結果を達成することは可能ですか？

出典

2017-02-07 Etienne Theoret