html - 使用 Jade 迭代获取键和索引

Question

如此处所述:http://jade-lang.com/reference/ ，很容易得到索引或键。但有没有办法同时获得两者？

这个:

ul
  each val, index in {"day": "Wed", "link": "url", "message": "three"}
    li#item-= index + ': ' + val

输出这个:

<ul>
  <li id="item-">day: Wed</li>
  <li id="item-">link: url</li>
  <li id="item-">message: three</li>
</ul>

但我想要这个:

<ul>
  <li id="item-0">day: Wed</li>
  <li id="item-1">link: url</li>
  <li id="item-2">message: three</li>
</ul>

Answer 1

我认为只有在遍历数组时才会得到索引，所以 jade 文档与其示例有点混淆。我将为您提供三个选项来完成此操作。选择你自己的冒险!

选项 1:保留您的原始输入并构建您自己的索引

ul
  -var index = 0
  each val, key in {day: "Wed", link: "url", message: "three"}
    li(id="item-#{index++}") #{key}: #{val}

选项 2:将您的输入更改为数组的数组

ul
  each val, index in [["day", "Wed"], ["link", "url"], ["message", "three"]]
    li(id="item-#{index}") #{val[0]}: #{val[1]}

选项 3:将输入更改为对象数组

ul
  each val, index in [{day: "Wed"}, {link: "url"}, {message: "three"}]
    li(id="item-#{index}") #{Object.keys(val)[0]}: #{val[Object.keys(val)[0]]}

第一个选项可能是您想要的，但阅读其他选项可能会很有趣。