Question

我有一个xxx组件，当与riot-tag属性和标准HTML5标记一起使用时，它可以正常工作：<article riot-tag="xxx"></article>。但是，当我在循环内使用riot-tag属性时，标记为空：<article each="{xxxTags}" riot-tag="{xxx}"></article>。是否可以在循环中使用riot-tag？我怎样才能使它发挥作用？

补充说明：

我必须逐个生成几个不同的，虽然相似的组件。所以我有一个数组来存储它们：

var xxxTags = [{tag: 'xxx'}, {tag: 'yyy'}, {tag: 'zzz'}];

手动为{|> xxx ， yyy ， zzz 添加textareas任意一个工作正常并生成各个组成部分。但是当我尝试使用each时，它们在chrome devtools中最终为空（没有孩子），但与手动放置的相同。

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
<my-tag></my-tag>

<!-- inlined tag definition -->
<script type="riot/tag">
  <my-tag>
    /*Standard, manual addition of different components (works)*/
    <xxx></xxx>
    <yyy></yyy>
    <zzz></zzz>
    /*Standard addition of same components in a loop (works)*/
    <div each={myTags}>{tag}</div>
    <br>
    /*Addition of different components with "riot-tag" manually (works)*/
    <div riot-tag="xxx"></div>
    <div riot-tag="yyy"></div>
    <div riot-tag="zzz"></div>
    /*Addition of different components with "riot-tag" in a loop (DOESN'T WORK should look like the example above)*/
    <div each={myTags} riot-tag="{tag}"></div>
    
    this.myTags = [{tag: 'xxx'}, {tag: 'yyy'}, {tag: 'zzz'}];
  </my-tag>
  
  <xxx>
    <p>X content</p>
  </xxx>
  
  <yyy>
    <p>Y content</p>
  </yyy>
  
  <zzz>
    <p>Z content</p>
  </zzz>
</script>

<!-- include riot.js and the compiler -->
<script src="//cdn.jsdelivr.net/g/riot@2.2(riot.min.js+compiler.min.js)"></script>


<!-- mount normally -->
<script>
  riot.mount('*');
</script>
</body>
</html>

＆＃13;

Answer 1

好吧，当使用每个 -loop生成时，看起来像riot-tag属性的标签不是挂载（仍然看起来像个bug？）。对于上面提到的代码，添加它可以完成工作：

this.on('mount', function() {
    for(var i = 0; i < this.myTags.length; i++) riot.mount(this.myTags[i].tag);
});

Riot-tag内循环

1 个答案: