使用数组时如何为聚合物中的纸张下拉菜单中的纸张项目赋值？

Question

我想给下面的纸张项目赋值

<paper-item value="1">label1</paper-item>
 <paper-item value="2">label2</paper-item>
 <paper-item value="3">label3</paper-item>

但我正在使用数组以这种方式动态获取标签

 <paper-dropdown class="dropdown" on-core-overlay-open="{{comboDrop}}">
        <core-menu class="menu">
         <template repeat="{{processlist}}">
              <paper-item>{{}}</paper-item>
            </template>
        </core-menu>
    </paper-dropdown>

我稍后在获得所需信息时将一个数组分配给进程列表。喜欢

processlist=arr

，这让我可以在 paper-dropdown-menu 中显示这些标签。

如何为纸张项目赋值以及如何访问与每个标签对应的值？我知道

detail.item.textContent

给你标签，我们如何才能类似地获取值

我对 javascript 和聚合物成分还很陌生，所以如果能提供正确方向的帮助，我们将不胜感激。

谢谢！

Answer 1

重复表达式是一个迭代器，您可以命名索引和值：

<paper-dropdown class="dropdown" on-core-overlay-open="{{comboDrop}}">
 <core-menu class="menu">
  <template repeat="{{label, i in processlist}}">
   <paper-item value="{{i}}>{{label}}</paper-item>
  </template>
 </core-menu>
</paper-dropdown>

您可以在此处阅读有关 Polymer 表达式的更多信息：https://www.polymer-project.org/docs/polymer/expressions.html

为了回答你的第二部分，我假设你想检索下拉列表中所选项目的索引？如果是这种情况，您应该使用允许您指定 value 属性的 paper-dropdown-menu 组件，在您的情况下 valueattr="value" 并通过 selected 检索当前选定的索引。查看此处的示例： https://github.com/Polymer/paper-dropdown-menu/blob/master/demo.html

或者如果你只是想查询纸质项目，你也可以通过 shadowRoot 来实现，例如在您的主文档中：

// Get all paper-items
var items = document.querySelector("#dropdown").shadowRoot.querySelectors('paper-items[value]');

for(var i = 0; i < items.length; i++) {
 console.log("Value for item " + i + " = " + items[i].getAttribute("value"));
}

或者，如果您想使用您自己的点击处理程序实现自定义组件，那真的很简单：

在实际项目上，您只需指定一个点击处理程序：

<paper-item value="{{i}}" on-click="{{handleClick}}">{{label}}</paper-item>

然后将处理程序添加到您的聚合物组件代码中：

Polymer("my-component", {

 handleClick: function(e) {
   console.log("You clicked the item with value = " + e.target.getAttribute("value"));
 }
});

希望对您有所帮助。

使用数组时如何为聚合物中的纸张下拉菜单中的纸张项目赋值？

how to assign values to paper-items in a paper-dropdown-menu in polymer when using an array?

arrays

combobox

polymer