如何重設 <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