riot.js: Tag dynamisch hinzufügen und mounten

Ich bin sehr neu zu riot.js und vielleicht bin ich eine offensichtliche Sache.riot.js: Tag dynamisch hinzufügen und mounten

Wenn ich Tag statisch hinzufügen und dann mount es - alles funktioniert perfekt. Aber wenn ich versuche, Tag mit JavaScript dynamisch hinzuzufügen - ich sehe nichts. Ich nehme an, dass ich irgendwie neu erstellte Elemente mounten muss, aber ich weiß nicht, wie ich das machen soll.

<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>

Quelle

2016-11-17 never

Sie müssen riot.mount rufen, nachdem Sie den Knoten zum DOM hinzugefügt haben:

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

Quelle

2016-11-17 09:05:51 Antoine

Danke, sehr gute Antwort! Stellen Sie einfach das DOM-Element selbst bereit. – never

riot.js: Tag dynamisch hinzufügen und mounten

Antwort

Verwandte Themen