2

属性と標準の HTML5 タグを使用すると正しく動作するxxxコンポーネントがあります: . ただし、ループ内で属性を使用すると、タグは空になります: . ループでの使用はまったく可能ですか? どうすればそれを機能させることができますか？riot-tag<article riot-tag="xxx"></article>riot-tag<article each="{xxxTags}" riot-tag="{xxx}"></article>riot-tag

追加説明:

似たようなコンポーネントではありますが、いくつかの異なるコンポーネントを 1 つずつ生成する必要があります。だから私はそれらを格納するための配列を持っています:

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

xxx、yyy、zzzのすべてtextareasに対して手動で 1 つずつ配置すると、正常に動作し、それぞれのコンポーネントが生成されます。しかし、私がそれをやろうとすると、chrome devtools では空 (子なし) になりますが、それ以外は手動で入れたものと同じです。each

<!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属性を持つタグがマウントされていないようです (まだバグのように見えますか?)。上記のコードの場合、これを追加すると次のようになります。

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 に答える