Как сбросить <iron-form> после динамической загрузки данных с помощью <iron-ajax> в Polymer 2.x?

Question

Я хочу сбросить кнопки формы, используя reset() метод <iron-form>элемент.

Желаемое поведение

Желаемое поведение заключается в том, что после нажатия кнопки сброса, две кнопки, которые были изначально unchecked быть unchecked и две кнопки, которые были изначально checked быть checked,

Фактическое поведение

Реальное поведение заключается в том, что после нажатия кнопки " Сброс" все кнопки переворачиваются на unchecked,

демонстрация

Вот мое демо Plunker. Обратите внимание, что на самом деле я загружаю данные из Firebase. В демоверсии я загружаю его с myjson.com.

Шаги, чтобы воссоздать проблему

1. Откройте это демо.
2. Обратите внимание на два checked кнопки и две unchecked,
3. Проверьте два unchecked кнопок.
4. Нажмите кнопку сброса.
5. Обратите внимание, что все кнопки переворачиваются на unchecked,

Желаемое поведение для двух кнопок, которые были изначально unchecked быть unchecked и две кнопки, которые были изначально checked быть checked,

Код

https://plnkr.co/edit/viXDsAVrcmSOdAYriySm?p=preview

<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="iron-form/iron-form.html">
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="paper-button/paper-button.html">


<dom-module id="my-demo">
  <template>
    <style>
      paper-button, form > * {
        margin-top: 40px;
        font-size: 18px;
      }
    </style>

    <iron-ajax
      id="ajax"
      auto
      url="https://api.myjson.com/bins/1dntup"
      last-response="{{item}}"
      handle-as="json"
      >
    </iron-ajax>

    <iron-form id="form">
      <form>
        <paper-toggle-button name="alice" checked="{{item.alice}}">Alice</paper-toggle-button>
        <paper-toggle-button name="bob" checked="{{item.bob}}">Bob</paper-toggle-button>
        <paper-toggle-button name="charlie" checked="{{item.charlie}}">Charlie</paper-toggle-button>
        <paper-toggle-button name="dave" checked="{{item.dave}}">Dave</paper-toggle-button>
      </form>
    </iron-form>

    <paper-button on-tap="_onTap">Reset</paper-button>

  </template>

  <script>
    class MyDemo extends Polymer.Element {
      static get is() {
        return 'my-demo';
      }
      static get properties() {
        return {
          item: {
            type: Object,
            notify: true,
          },
        };
      }

      ready() {
        super.ready();
      }

      _onTap() {
        this.$.form.reset();
        }

    }

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

Правки

Пользователь @madietov с сайта Polymer Slack отмечает, что здесь в исходном коде используется защищенный метод, называемый _init() для инициализации настроек по умолчанию. И это _init() Метод, кажется, вызывается до <iron-ajax> элемент возвращает свои значения.

_init() устанавливает защищенное свойство под названием _defaults, Если бы я мог получить доступ либо к защищенному методу, либо к защищенному свойству, я мог бы вызвать метод или установить свойство после <iron-ajax> возвращает свои начальные значения.

Answer 1

Замещать

this.$.form.reset();

с

this.$.ajax.generateRequest();

демонстрация

https://plnkr.co/edit/4ROGJbzqk98X6FtbVSCN?p=preview

<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="iron-form/iron-form.html">
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="paper-button/paper-button.html">


<dom-module id="my-demo">
  <template>
    <style>
      paper-button, form > * {
        margin-top: 40px;
        font-size: 18px;
      }
    </style>

    <iron-ajax
      id="ajax"
      auto
      url="https://api.myjson.com/bins/1dntup"
      last-response="{{item}}"
      handle-as="json"
      >
    </iron-ajax>

    <iron-form id="form">
      <form>
        <paper-toggle-button name="alice" checked="{{item.alice}}">Alice</paper-toggle-button>
        <paper-toggle-button name="bob" checked="{{item.bob}}">Bob</paper-toggle-button>
        <paper-toggle-button name="charlie" checked="{{item.charlie}}">Charlie</paper-toggle-button>
        <paper-toggle-button name="dave" checked="{{item.dave}}">Dave</paper-toggle-button>
      </form>
    </iron-form>

    <paper-button on-tap="_onTap">Reset</paper-button>

  </template>

  <script>
    class MyDemo extends Polymer.Element {
      static get is() {
        return 'my-demo';
      }
      static get properties() {
        return {
          item: {
            type: Object,
            notify: true,
          },
        };
      }

      ready() {
        super.ready();
      }

      _onTap() {
        //this.$.form.reset();
        this.$.ajax.generateRequest();
        }

    }

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

кредит

Резюме из комментариев.
Наконечник шляпы: @AneesHameed