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

Question

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

期望的行为

所需的行为是，单击">重置">按钮后，最初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>

编辑

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