javascript - 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>

但是each在生成的 HTML 中省略了该元素以使其成为有效的 HTML。请注意，eachRiot 中不存在此类标签。

更新：似乎特别是对于tbody > each > tr组合，我上面描述的解决方案可以工作 - 空each元素在 table 之前移动，并且trs 从内部直接位于tbody. 但是，上下文存在一个问题 - trs 无法访问item变量，这使得这种情况无用。

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

请参阅问题 #564。

3 回答 3