更改项目后如何更新纸张下拉菜单？答案

【问题标题】：How to update a paper-dropdown-menu after I changed the items?更改项目后如何更新纸张下拉菜单？
【发布时间】：2017-09-06 14:56:51
【问题描述】：

我使用 Polymer 2.0 的纸张下拉菜单来提供选择。由于某些外部影响，元素本身可能会发生变化。发生这种情况时，显示的元素不会更新。

一个例子：

<!doctype html>
<html>
<head>
  <base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="polymer/polymer-element.html">
  <link rel="import" href="paper-listbox/paper-listbox.html">
</head>
<body>


<dom-module id="my-element">

  <template>
    <paper-dropdown-menu label="Dinosaurs">
      <paper-listbox slot="dropdown-content" selected="0">
        <template is="dom-repeat" items="[[_dinosaurs]]">
          <paper-item>[[item]]</paper-item>
        </template>
      </paper-listbox>
    </paper-dropdown-menu>
    <paper-button on-tap="changeList">Change List</paper-button>
  </template>


  <script>
      HTMLImports.whenReady(function() {
          class MyElement extends Polymer.Element {
              static get is() { return 'my-element'; }
              static get properties() {
                  return {
                      _dinosaurs: {
                          type: Array,
                          value: ['Initial entry :D No dinosaurs here :(']
                      }
                  };
              }

              constructor() {
                  super();
                  this.prop = 'my-element'
              }

              changeList() {
                  if (this._dinosaurs.length < 3) {
                      this.set('_dinosaurs', ['allosaurus', 'brontosaurus', 'carcharodontosaurus', 'diplodocus']);
                  }
                  else {
                      this.set('_dinosaurs', ['There is only T-Rex!']);
                  }
              }
          }
          customElements.define(MyElement.is, MyElement);
      });

  </script>

</dom-module>

<my-element></my-element>

</body>
</html>

纸张列表框最初填充了一个最初选择的元素。当按下“更改列表”按钮时，paper-listbox 的内容会发生变化，包括位置 0 的元素，即当前选择。但是，显示的文本保持不变。当列表框的元素发生变化时，如何更新显示的元素？

【问题讨论】：

标签： polymer-2.x paper-elements

【解决方案1】：

请参阅下面的attr-for-selected 的用法。

<!doctype html>
<html>
<head>
  <base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="polymer/polymer-element.html">
  <link rel="import" href="paper-listbox/paper-listbox.html">
</head>
<body>


<dom-module id="my-element">

  <template>
    <paper-dropdown-menu label="Dinosaurs">
      <paper-listbox slot="dropdown-content" attr-for-selected="item-name">
        <template is="dom-repeat" items="[[_dinosaurs]]">
          <paper-item item-name="[[item]]">[[item]]</paper-item>
        </template>
      </paper-listbox>
    </paper-dropdown-menu>
    <paper-button on-tap="changeList">Change List</paper-button>
  </template>


  <script>
      HTMLImports.whenReady(function() {
          class MyElement extends Polymer.Element {
              static get is() { return 'my-element'; }
              static get properties() {
                  return {
                      _dinosaurs: {
                          type: Array,
                          value: ['Initial entry :D No dinosaurs here :(']
                      }
                  };
              }

              constructor() {
                  super();
                  this.prop = 'my-element'
              }

              changeList() {
                  if (this._dinosaurs.length < 3) {
                      this.set('_dinosaurs', ['allosaurus', 'brontosaurus', 'carcharodontosaurus', 'diplodocus']);
                  }
                  else {
                      this.set('_dinosaurs', ['There is only T-Rex!']);
                  }
              }
          }
          customElements.define(MyElement.is, MyElement);
      });

  </script>

</dom-module>

<my-element></my-element>

</body>
</html>

【讨论】：

谢谢。不幸的是，这并不能解决我的问题。如果我正确理解该函数，则使用 attr-for-selected 项目的名称也将用作索引值。但是，我想保留旧索引。因此，在我的示例中，如果显示“初始条目...”并且我单击“更改列表”，我希望显示的选择更改为“异特龙”，因为这是索引为 0 的新项目。使用您的方法，如果下拉列表不再存在，它就会丢失其先前的值。