如何在Polymer 2.x中使用<iron-ajax>动态加载数据后重置<iron-form>？

Question

我想使用reset()元素的<iron-form>方法重置表单按钮。

期望的行为

所需的行为是，在点击重置按钮后，原来unchecked为unchecked的两个按钮和最初checked的两个按钮成为checked。

实际行为

实际行为是，点击重置按钮后，所有按钮都会翻到unchecked。

演示

Here is my Plunker demo.请注意，实际上我正在从Firebase加载数据。在演示中，我从myjson.com加载它。

重新创建问题的步骤

1. Open this demo.
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>

编辑

Polymer Slack Site的用户@madietov指出the source code here使用名为_init()的受保护方法来初始化默认设置。在_init()元素返回其值之前，似乎会调用此<iron-ajax>方法。

_init()设置名为_defaults的受保护属性。如果我可以访问受保护的方法或受保护的属性，那么我可以在<iron-ajax>返回其初始值之后调用该方法或设置属性。

Answer 1

替换

this.$.form.reset();

与

this.$.ajax.generateRequest();

Demo

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