重置dom-repeat

Question

我在Polymer中使用dom-repeat。相应的列表包括每当重置dom-repeat列表时应设置的初始值。但是，当列表的第一个元素保持相同的初始值时，即使在将列表重置为新值之前完全清空列表，也不会重置该值。这是我的最小例子：

<dom-module id="console-app">
  <template>
    <div id="command-selection">
      <paper-dropdown-menu id="command" label="Function">
        <paper-listbox slot="dropdown-content" selected="{{_commandIndex}}">
          <paper-item>A</paper-item>
          <paper-item>B</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
    </div>

    <div id="parameters">
      <template is="dom-repeat" items="[[_parameterData]]">
        <parameter-block name="[[item.name]]" initial-value="[[item.initialValue]]" ></parameter-block>
      </template>
    </div>
  </template>

  <script>
      class ConsoleApp extends Polymer.Element {

          static get is() {
              return 'console-app';
          }



          static get properties() {
              return {
                  _commandIndex: {
                      type: Number,
                      value: -1,
                      observer: '_onIndexChange'
                  },

                  _parameterData: {
                      type: Array,
                      value: () => { return []; }
                  }
              };
          }

          _onIndexChange() {
              this.set('_parameterData', []);

              switch (this._commandIndex) {
                  case 0:
                      this.set('_parameterData', [
                          { name: 'AAA', initialValue: '111'},
                          { name: 'BBB', initialValue: '123'}
                      ]);
                      break;

                  case 1:
                      this.set('_parameterData', [
                          { name: 'CCC', initialValue: '112'}
                      ]);
                      break;

              }
          }
      }

      customElements.define(ConsoleApp.is, ConsoleApp);
  </script>
</dom-module>

参数块：

<dom-module id="parameter-block">
  <template>
    <paper-input id="non-bool-value" label="[[name]]"
                 value="{{_value}}"></paper-input>
  </template>

  <script>
      class ParameterBlock extends Polymer.Element {

          static get is() {
              return 'parameter-block';
          }



          static get properties() {
              return {
                  _value: {
                      type: String,
                      value: () => { return ''; }
                  },

                  initialValue: {
                      type: String,
                      value: () => { return ''; },
                      observer: '_onInitialValueChange'
                  },

                  name: {
                      type: String,
                      value: () => { return ''; }
                  }
              };
          }



          _onInitialValueChange() {
                this.set('_value', this.initialValue);
          }
      }

      customElements.define(ParameterBlock.is, ParameterBlock);
  </script>
</dom-module>

当下拉菜单的索引发生变化时，我将_parameterData重置为[]，并假设之后对_parameterData的所有未来更改都将作为新元素进行评估。但是，似乎列表会记住之前的初始值，因为未调用相应的侦听器，并且即使我正在更改选择，对第一个文本元素的先前更改也不会重置为111。如果我使用不同的初始值，一切正常，所以我认为我需要告诉Polymer以某种方式正确地重置元素，但是如何？

Answer 1

因为，您只是观察initialValue，应用程序将不知道您要更改的initialValue是针对不同的name。这就是为什么它没有重置为您指定的默认值。

您需要同时观察属性name和initialValue。因此，请将观察者代码更改为：

static get observers() {
    return [
      '_onInitialValueChange(name, initialValue)'
    ]
}

和您的方法：

_onInitialValueChange(name, initialValue) {
    this.set('_value', this.initialValue);
  }

我更新了提供的plnkr link。