2016-11-17 29 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

関連する問題