javascript - Riot.js 如何重复标记一定次数？

Question

我只需要重复标签 5 次。我阅读了文档，但没有意识到如何做这样的事情：

<some-tag>
   <star repeat={5} />
</some-tag>

我发现只有这种丑陋的方式：

<some-tag>
   <star each={stars} />

   this.stars = new Array(5);
</some-tag>

Answer 1

在查看源代码后，您可能会对此感兴趣。

如果您打算使用该each属性，则必须为 riot 定义某种数组以传递给forEach.

这个jsfiddle是另一个想法（这不是最佳的），但我认为它说明了这一点。另一种解决方案是使用 Riot 的mixin系统来构建某种repeat属性：

https://jsfiddle.net/aunn3gt0/2/

在您尝试使用<yield/>标签之前，这是一个很好的解决方案。那么它可能需要调整。以下是它的工作原理：

var repeat = {
  init: function() {
    var repeats = [],
        count = this.opts.repeat

    this.on('mount', function() {
      if (!count) return

      var impl = this.root.innerHTML
      this.root.removeAttribute('repeat')

      while(repeats.length < count) {
        var clone = this.root.cloneNode()
        this.root.parentNode.insertBefore(clone, this.root)
        clone.innerHTML = impl
        repeats.push(riot.mount(clone))
      }
    })

    this.on('unmount',function(){
      repeats.forEach(function(tag,i){
        tag.unmount()
      })
    })

  }
}

然后只需将其附加this.mixin(repeat)并按照您的预期使用它：

<tag repeat="10">Repeated 10 times.</tag>

Answer 2

与您提出的类似，您可以在模板中正确执行此操作：

<some-tag>
   <star each="{(NOTHING, i) in Array(state.repeatCount)}" />
</some-tag>

在本例中，i包含索引。