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

Question

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ant*_*ine 7

riot.mount将节点添加到DOM后,必须调用:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，6 月前
查看次数：	1903 次
最近记录：	9 年，6 月前