2016-11-17 1 views
2

저는 riot.js에 새로운 것이므로 분명히 물어볼 수 있습니다.riot.js : 태그를 동적으로 추가하고 마운트하십시오.

태그를 정적으로 추가 한 다음 마운트하면 모든 것이 완벽하게 작동합니다. 하지만 JavaScript를 동적으로 사용하여 태그를 추가하려고하면 아무 것도 볼 수 없습니다. 어떻게 든 새로 생성 된 요소를 마운트해야한다고 생각하지만이 작업을 수행하는 방법을 모르겠습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.7/riot+compiler.min.js"></script> 
 
<body> 
 
    <h1> 
 
    testing riot.js 
 
    </h1> 
 
    
 
    <ol id="list"> 
 
    <li> 
 
     <example></example>  
 
    </li> 
 
    <li> 
 
     <example></example>  
 
    </li> 
 
    </ol> 
 
    <button onclick="addTag()">Add tag</button> 
 
    
 
    <script type="riot/tag"> 
 
    <example> 
 
    <p>Welcome to Riot.js</p> 
 
    </example> 
 
</script> 
 

 
<script> 
 
\t riot.mount('example'); 
 
    
 
    function addTag(){ 
 
    \t var list = document.getElementById("list"); 
 
    var li = document.createElement('li'); 
 
    list.appendChild(li); 
 
    
 
    var tag = document.createElement('example'); 
 
    li.appendChild(tag) 
 
    } 
 
</script> 
 

 
</body>

답변

6

당신이 DOM에 노드를 추가 한 후에는 riot.mount를 호출해야합니다 :

function addTag(){ 
    var list = document.getElementById("list"); 
    var li = document.createElement('li'); 
    list.appendChild(li); 

    var tag = document.createElement('example'); 
    li.appendChild(tag) 
    riot.mount(tag, 'example'); 
} 
+0

당신을 감사 훌륭한 대답을! DOM 요소 자체를 마운트하기 만하면됩니다. – never