使用Jade迭代获取密钥和索引

Sco*_*son 21 html iteration templates loops pug

如下所述:http://jade-lang.com/reference/,很容易获得索引或密钥.但有两种方法可以获得两者吗?

这个:

ul
  each val, index in {"day": "Wed", "link": "url", "message": "three"}
    li#item-= index + ': ' + val
Run Code Online (Sandbox Code Playgroud)

输出:

<ul>
  <li id="item-">day: Wed</li>
  <li id="item-">link: url</li>
  <li id="item-">message: three</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

但我想要这个:

<ul>
  <li id="item-0">day: Wed</li>
  <li id="item-1">link: url</li>
  <li id="item-2">message: three</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

Dav*_*don 37

我认为如果你在迭代一个数组,你只得到一个索引,所以jade文档与它的例子有点混淆.我将为您提供三个选项来完成此任务.选择自己的冒险!

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

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

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

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

选项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]]}
Run Code Online (Sandbox Code Playgroud)

第一个选项可能是你想要的,但其他选项可能很有趣.