riot.js : 动态添加标签并挂载

Question

我是 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>
 riot.mount('example');
  
  function addTag(){
   var list = document.getElementById("list");
    var li = document.createElement('li');
    list.appendChild(li);
    
    var tag = document.createElement('example');
    li.appendChild(tag)
  }
</script>

</body>

Answer 1

将节点添加到 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');
}

riot.js : 动态添加标签并挂载

riot.js : add tag dynamically and mount it

javascript

riot.js