在 Polymer 1.0 的纸质菜单中设置选定值

Question

我创建了一个自定义元素，它利用 paper-dropdown-menu 和 paper-menu 来管理 Web 表单中的 select 框。但是，当尝试通过 JavaScript 设置 selected 值时，即使值更新，页面中的元素实际上也不会在之后显示列表中的 selected 项目。

我查看了无数示例并尝试了数十种不同的方法。我不确定使用什么作为我的 attr-for-selected，但到目前为止尝试了 value、name 和 label。

<dom-module is="custom-listbox">
<template>
<template is="dom-repeat" items="{{dropMenus}}">
  <paper-dropdown-menu id="dropdownmenu" label="Type">
    <paper-menu id="menu" class="dropdown-content" selected="{{selectedValue}}" attr-for-selected="label">
    <template is="dom-repeat" items="{item}}">
      <paper-item{{item}}</paper-item>
    </template>
    </paper-menu>
  </paper-dropdown-menu>
</template>
</template>

<script>
Polymer({
  is: 'custom-listbox',
  ready: function() {
    var arr = ["value1", "value2", "value3"];
    this.set('dropMenus', [arr]);
  },
  properties: {
    selectedValue: {
      type: String,
      value: 'value1' // initially selected? ...doesn't work either.
      },
  setSelected:function(selectedVal) {
    console.log(selectedVal);
    this.selectedValue = selectedVal;
    console.log(this.selectedValue);
    }
});
</script>

</dom-module>

稍后在我的 app.js 中，我尝试像这样设置 selected 值：

document.querySelector('#CustomListboxID').setSelected('value2');

控制台对此进行记录，显示 'value2' 已传递给该元素，并且在该元素内，this.selectedValue 已正确设置为 'value2'。然而，同样，该元素实际上并没有在页面中更新。我错过了什么吗？

value2
value2

编辑

Stack Overflow 中有关此主题的许多讨论都被标记为 Polymer，尽管并不总是表明讨论是与版本 0.5 还是 1.0 相关，这可能是两个完全不同的框架。我不确定我上面使用的方法是否已经过时，因此...

看来我应该可以使用 paper-menu 的 .select(value) 函数来设置 selected 值，如下所示：

this.querySelector('#menu').select(selectedVal);

此函数已记录在案，我确认它存在并且正在从 iron-menu-behavior 导入到 paper-menu 中。然而，虽然它没有抛出任何错误，但它也什么都不做。

Answer 1

这是有效的。您必须设置 'paper-item' 的 'label' 属性，使用 <paper-item label="{{item}}">{{item}}</paper-item> 而不是 <paper-item{{item}}</paper-item> 并修复了 javascript.

中的 { 不匹配

<!DOCTYPE html>
<html>  
<head>

  <title>Template me</title>
  
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
  
  <base href="http://polygit.org/components/">
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-menu/paper-menu.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-item/paper-item.html">
  
</head>
<body class="fullbleed">

<custom-listbox id="CustomListboxID"></custom-listbox>

<dom-module is="custom-listbox">
<template>
<template is="dom-repeat" items="{{dropMenus}}">
  <paper-dropdown-menu id="dropdownmenu" label="Type">
    <paper-menu id="menu" class="dropdown-content" attr-for-selected="label" selected="{{selectedValue}}">
    <template is="dom-repeat" items="{{item}}">
      <paper-item label="{{item}}">{{item}}</paper-item>
    </template>
    </paper-menu>
  </paper-dropdown-menu>
</template>
</template>

<script>
Polymer({
  is: 'custom-listbox',
  ready: function() {
    var arr = ["value1", "value2", "value3"];
    this.set('dropMenus', [arr]);
  },
  properties: {
    selectedValue: {
      type: String,
      value: 'value1' // now initial works !! 
    }
  },
  setSelected:function(selectedVal) {
    console.log(selectedVal);
    this.selectedValue = selectedVal;
    console.log(this.selectedValue);
  }
  
});
</script>

</dom-module>

</body>
</html>

现在 document.querySelector('#CustomListboxID').setSelected('value2'); 正在更新 dropdown-menu here。

在 Polymer 1.0 的纸质菜单中设置选定值

Set selected value in a paper-menu in Polymer 1.0

polymer-1.0