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 元素被移动到里面的table和tr直接在tbody下面。但是，上下文存在问题 - trs 无法访问 item 变量，这使得这种情况变得无用。

Answer 1

如果不在单元格中嵌套元素，很难做到这一点。用 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 2

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

Answer 3

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

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

Multiple elements per single item in Riot.js