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

Question

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

期望的行为

期望的行为是单击Reset按钮后，即最初的两个按钮unchecked要unchecked和最初的两个按钮checked进行checked 。

实际行为

实际的行为是，单击“ 重置”按钮后，所有按钮都翻转为unchecked 。

演示版

这是我的Plunker演示。 请注意，实际上我是从Firebase加载数据。 在演示中，我正在从myjson.com加载它。

重现问题的步骤

1. 打开这个演示。
2. 注意两个checked按钮和两个unchecked checked按钮。
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网站的用户@madietov指出， 此处的源代码使用称为_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