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

，它允许我在纸张下拉菜单中显示这些标签。

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

detail.item.textContent

为您提供标签，我们如何才能获得类似的值

我是javascript和聚合物组件的新手，所以在正确的方向上的任何帮助将不胜感激。

谢谢！

Answer 1

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

<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

要回答你的第二部分，我假设你想要检索所选项目的下拉列表索引？如果是这种情况，您应该使用paper-dropdown-menu组件，允许您指定value属性，在您的情况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 Component的代码中：

Polymer("my-component", {

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

希望有所帮助。

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

1 个答案: