我有一个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中最终为空(没有孩子),但与手动放置的相同。
<!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;
答案 0 :(得分:1)
好吧,当使用每个 -loop生成时,看起来像riot-tag
属性的标签不是挂载(仍然看起来像个bug?)。对于上面提到的代码,添加它可以完成工作:
this.on('mount', function() {
for(var i = 0; i < this.myTags.length; i++) riot.mount(this.myTags[i].tag);
});