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

Question

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

期望的行为

期望的行为是，点击Reset按钮后，原来unchecked的两个按钮变成unchecked，原来checked的两个按钮变成checked .

实际行为

实际的行为是点击Reset按钮后，所有按钮都翻转到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>

信用

来自 cmets 的总结。
帽子提示：@AneesHameed