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。

dom-repeat 内的重置值

Reset values within dom-repeat

javascript

polymer

polymer-2.x