Riot.js中每个项目的多个元素

Question

如何在没有each属性的容器元素的情况下为每个项目创建多个元素？

更具体地说，假设我想创建一个具有预期结构的定义列表，如下所示：

<dl>
  <dt>Key1</dt>
  <dd>Value1</dd>

  <dt>Key2</dt>
  <dd>Value2</dd>
</dl>

所以，基本上我想做像

这样的事情

<dl>
    <each each="{ item in data }">
      <dt>{ item.id }</dt>
      <dd>{ item.name }</dd>
    </each>
</dl>

但是在结果HTML中省略了each元素以使其成为有效的HTML。 请注意，Riot中不存在此each标记。

更新：似乎特别是对于tbody > each > tr组合，我上面描述的解决方案可以正常工作 - 空each元素在表格前移动{{1来自内部的s直接位于tr下。但是，上下文存在问题 - tbody s无法访问tr变量，导致此案例无用。

Answer 1

这已使用<virtual>元素解决，您应该使用：

<virtual each="{ item in data }">
  <dt>{ item.id }</dt>
  <dd>{ item.name }</dd>
</virtual>

http://riotjs.com/guide/#loops

Answer 2

如果没有在单元格中嵌套元素，很难做到这一点。使用ul和li来做这件事并不容易，例如：

<ul each="{ opts.data }">
   <li>{ id }</li>
   <li>{ name }</li>
   <li>{ description }</li>
</ul>

在样式表中使用类似的内容：

li {
    display: inline-block;
}

li:nth-child(3) {
    display: table-row;
}

这是一个使用RiotJS的演示：http://jsfiddle.net/rvanzon/3c8jjzw4/4/

Answer 3

目前看来这是不可能的 - 直到实现删除父自定义标记的可能性。

请参阅issue #564。