如何在 Polymer 2.x 中重复 <option> 标签？

Question

在 Polymer 1.0 中，我会像这样在 <select> 标签内重复 <option> 标签：

<select>
  <template is="dom-repeat" items="{{items}}">
    <option value$="[[item]]">[[item]]</option>
  </template>
</select>

但在 Polymer 2.x 中建议使用 <dom-repeat> 标签：

<select>
  <dom-repeat items="{{items}}">
    <template>
      <option value$="[[item]]">[[item]]</option>
    </template>
  </dom-repeat>
</select>

但这不起作用。那么如何在 Polymer 2 中重复 <option> 标签呢？

Answer 1

这个问题看起来类似于 one reported for <dom-repeat> inside <table>。

目前的解决方法是使用 "hybrid mode"，其中 2.0 <dom-repeat> 包含 <template is="dom-repeat">:

<select>
  <dom-repeat items="[[items]]">
    <template is="dom-repeat" items="[[items]]">
      <option value="[[item]]">[[item]]</option>
    </template>
  </dom-repeat>
</select>

codepen

更新： @DocDude（来自 Polymer 团队的 Arthur Evans）noted in Slack 仍然支持使用 <template is="dom-repeat"> inside聚合物 2.0 元素。您只需要在元素外部使用 element 包装器（例如，在 index.html 中）。

Polymer 核心团队的@KevinShaaf 也confirmed this in GitHub:

如何在 Polymer 2.x 中重复 <option> 标签？

How to repeat <option> tags in Polymer 2.x?

polymer

polymer-2.x