[英]How to reset <iron-form> after dynamically loading data using <iron-ajax> in Polymer 2.x?
I want to reset my form buttons using the reset()
method of the <iron-form>
element. 我想使用<iron-form>
元素的reset()
方法重置表单按钮。
The desired behavior is that after clicking the Reset button, the two buttons that were originally unchecked
to be unchecked
and the two buttons that were originally checked
to be checked
. 期望的行为是单击Reset按钮后,即最初的两个按钮unchecked
要unchecked
和最初的两个按钮checked
进行checked
。
The actual behavior is that after clicking the Reset button, all the buttons flip to unchecked
. 实际的行为是,单击“ 重置”按钮后,所有按钮都翻转为unchecked
。
Here is my Plunker demo. 这是我的Plunker演示。 Note that in reality I am loading data from Firebase. 请注意,实际上我是从Firebase加载数据。 In the demo, I am loading it from myjson.com. 在演示中,我正在从myjson.com加载它。
checked
buttons and two unchecked
. 注意两个checked
按钮和两个unchecked
checked
按钮。 unchecked
buttons. 选中两个unchecked
按钮。 unchecked
. 请注意,所有按钮都翻转为unchecked
。 The desired behavior is for the two buttons that were originally unchecked
to be unchecked
and the two buttons that were originally checked
to be checked
. 期望的行为是对于最初的两个按钮, unchecked
要unchecked
和最初的两个按钮checked
进行checked
。
<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>
User @madietov of the Polymer Slack Site points out that the source code here uses a protected method called _init()
to initialize the default settings. Polymer Slack网站的用户@madietov指出, 此处的源代码使用称为_init()
的受保护方法来初始化默认设置。 And this _init()
method seems to be called before the <iron-ajax>
element returns its values. 并且此_init()
方法似乎在<iron-ajax>
元素返回其值之前被调用。
_init()
sets a protected property called _defaults
. _init()
设置一个称为_defaults
的受保护属性。 If I could access either the protected method or protected property, then I could call the method or set the property after <iron-ajax>
returns its initial values. 如果可以访问受保护的方法或受保护的属性,则可以在<iron-ajax>
返回其初始值之后调用该方法或设置属性。
Replace 更换
this.$.form.reset();
with 与
this.$.ajax.generateRequest();
https://plnkr.co/edit/4ROGJbzqk98X6FtbVSCN?p=preview
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>
Credit
信用
Summary from comments. 评论摘要。
Hat tip: @AneesHameed 帽子提示:@AneesHameed
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.