在飞镖聚合物重复模板中获取索引答案

【问题标题】：Get index in dart polymer repeat template在飞镖聚合物重复模板中获取索引
【发布时间】：2013-10-26 05:52:46
【问题描述】：

我想遍历一个可枚举并显示一个计数器

<div template repeat="{{ name in names }}">
  ###. {{name}}
</div>

我应该放什么而不是###，以便显示名称的位置：

1. John Doe
2. Jane Doe
3. etc...

【问题讨论】：

标签： dart dart-polymer

【解决方案1】：

Polymer 现在可以做到这一点：

<template repeat="{{fruit in fruits | enumerate}}">
  <li>You should try the {{fruit.value}}. It is number {{fruit.index}}.</li>
</template>

示例取自https://github.com/sethladd/dart-polymer-dart-examples/blob/master/web/iterate_loop_index/my_example.html

【讨论】：

这不再适用于 Polymer 0.5。请改用 Wolfram 的解决方案。我知道这是 2 年前回答的问题，但请让我为从搜索中到达的人注意这一点。
这仍然是 Polymer 0.5 中的方式。也许你的意思是 1.0？

【解决方案2】：

其他解决方案在 Polymer 0.3.4 中对我不起作用（不再？），但有 documentation on templates，包括在循环遍历集合时进行索引：

<template repeat="{{ foo, i in foos }}">
  <template repeat="{{ value, j in foo }}">
    {{ i }}:{{ j }}. {{ value }}
  </template>
</template>

【讨论】：

【解决方案3】：

它在 web_ui 中可用，但在 Polymer 中尚不可用。

Web UI 是 polymer.dart 的前身。 Polymer.dart 的功能几乎与 Web UI 相当。下面列出了尚未在 polymer.dart 中实现的 Web UI 功能：

循环内可用的索引变量的值

https://www.dartlang.org/polymer-dart/#web-ui-parity

在那之前，您可以在列表中使用asMap 并遍历keys：

  <template repeat="{{i in names.asMap().keys)}}">
    <div>{{i}}: {{names[i]}}</div>
  </template>

【讨论】：

您甚至不必为此重写名称。 {{ names.asMap.keys 中的索引}}
@AlanKnight 非常酷，感谢您的提示。我已更新我的答案以使用您的建议。

【解决方案4】：

尚不可用，但您可以使用该 SO 答案中演示的 quiver 包：

https://stackoverflow.com/a/18165968/1713985

【讨论】：

创建一个全局的聚合物表达式可能会更好
这就是答案中发生的事情。 Polymer 表达式曾经被称为 fancysyntax :)