Question

我创建了一个自定义元素，该元素使用paper-dropdown-menu和paper-menu来管理网络表单中的选择框。但是，当尝试通过JavaScript设置所选值时，即使值更新，页面中的元素也不会在事后显示列表中的所选项。

我看了无数的例子，尝试了几十种不同的方法。我不确定将哪些内容用作我的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中，我尝试设置所选的值，如下所示：

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

控制台记录此信息，显示＆＃39; value2＆＃39;传递给元素，并且在元素内，this.selectedValue被正确设置为＆＃39; value2＆＃39;。但是，该元素实际上并未在页面中进行更新。我错过了什么吗？

value2
value2

修改

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

似乎我应该可以使用paper-menu的{{1}}函数来设置所选的值，如下所示：

.select(value)

此功能已记录在案，我确认它存在并从铁菜单行为导入纸质菜单。但是，尽管它没有抛出任何错误，但它也没有做任何事情。

Answer 1

这是有效的。你必须设置'paper-item'的'label'属性，使用 javascript中<paper-item label="{{item}}">{{item}}</paper-item>代替<paper-item{{item}}</paper-item>并修复{不匹配。

<!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');正在更新下拉菜单here。

在Polymer 1.0的纸张菜单中设置所选值

1 个答案: