Question

我对riot.js很新，可能是我要问一个显而易见的事情。

如果我静态添加标签然后安装它 - 一切都很完美。但是如果我尝试动态地使用JavaScript添加标签 - 我什么也看不见。我想我必须以某种方式装载新创建的元素，但我不知道如何做到这一点。

＆＃13;

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

＆＃13;

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：动态添加标签并挂载它

1 个答案: