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

Question

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

期望的行为

所需的行为是在单击 重置 按钮后，原来 unchecked 的两个按钮变为 unchecked 并且原来的两个按钮变为 unchecked原本 checked 变成 checked.

实际行为

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

演示

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

加载它

重现问题的步骤

Open this demo.
注意两个 checked 按钮和两个 unchecked.
检查两个 unchecked 按钮。
单击 重置 按钮。
注意所有按钮都翻转为 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 points out that the source code here 的用户@madietov 使用名为 _init() 的受保护方法来初始化默认设置。这个 _init() 方法似乎在 <iron-ajax> 元素 returns 其值之前被调用。

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

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

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

How to reset <iron-form> after dynamically loading data using <iron-ajax> in Polymer 2.x?

ajax

polymer

polymer-2.x

plunker

iron-elements

期望的行为

实际行为

演示

重现问题的步骤

代码

编辑