Question

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

一个例子：

＆＃13;

<!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>

＆＃13;

纸质列表框最初填充了最初选择的一个元素。当按钮＆＃34;更改列表＆＃34;按下，纸张列表框的内容改变，包括位置0的元素，即当前选择。但是，显示的文本保持不变。如果更改列表框的元素，如何更新显示的元素？

Answer 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>

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

1 个答案: