Polymer：如何重复下拉项

Question

我正在使用 Polymer paper-dropdown-menu。

我需要显示数字 1 到 5 的下拉列表。粗略的方法是

<paper-dropdown-menu label="Numbers" >
  <paper-dropdown class="dropdown">
    <core-menu class="menu">
        <paper-item>1</paper-item>
        <paper-item>2</paper-item>
        <paper-item>3</paper-item>
        <paper-item>4</paper-item>
        <paper-item>5</paper-item>
    </core-menu>
</paper-dropdown>

有没有办法通过使用 <template> 来避免重复 <paper-item> 代码类似于：

   <template repeat="{{ i in [0:25] }}">
       <paper-item>i</paper-item>
   </template>

Answer 1

如评论中所述，聚合物提供的演示中有一个示例。 https://github.com/Polymer/paper-dropdown/blob/master/demo.html

<x-trigger icon="menu">
  <paper-dropdown class="with-margin">
    with margin<br>
    <br>
    <template repeat="{{countries}}">
      {{name}}<br>
    </template>
  </paper-dropdown>
</x-trigger>


scope.countries = [
  {name: 'Afghanistan', code: 'AF'},
  {name: 'Åland Islands', code: 'AX'}
];

Answer 2

您可以执行 "range" 函数来生成数组，然后在已经 post 的方法中使用该数组。

看起来像

<paper-dropdown-menu label="Numbers" >
  <paper-dropdown class="dropdown">
    <core-menu class="menu">
      <template repeat="{{range}}">
        <paper-item>{{}}</paper-item>
      </template>
    </core-menu>
  </paper-dropdown>
</paper-dropdown-menu>

然后在 js 中创建范围函数

var range = function(begin, end) {
  if (typeof end === "undefined") {
    end = begin; begin = 0;
  }
  var result = [], modifier = end > begin ? 1 : -1;
  for ( var i = 0; i <= Math.abs(end - begin); i++ ) {
    result.push(begin + i * modifier);
  }
  return result;
}

这个范围函数来自这个post，它也有几个不同的方法来做这个。 Does JavaScript have a method like "range()" to generate an array based on supplied bounds?

然后将范围分配给重复模板正在使用的聚合物变量

this.range = range(1,25);

希望这对您有所帮助。抱歉，昨天发送最后一条回复时我无法回答，因为我正在上班。

编辑：关于 plunker 的示例 http://plnkr.co/edit/4TkQdR2B5vakbwOSAulK?p=preview

Polymer：如何重复下拉项

Polymer: How to repeat dropdown items

polymer

paper-elements