2

我有一个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'}];

为所有以下内容手动放置任何textareas一个：xxx，yyy，zzz可以正常工作并生成相应的组件。但是，当我尝试使用 时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>

4

1 回答 1

2

好的，看起来，带有riot-tag属性的标签在使用each -loop生成时没有安装（仍然看起来像一个错误？）。对于上面提到的代码，添加这个就可以了：

this.on('mount', function() {
    for(var i = 0; i < this.myTags.length; i++) riot.mount(this.myTags[i].tag);
});
于 2015-11-03T08:46:45.167 回答