我想使用元素的reset()方法重置我的表单按钮。<iron-form>
期望的行为
期望的行为是，在单击Reset按钮后，原来unchecked应该是的两个按钮和原来应该是unchecked的两个按钮。checkedchecked
实际行为
实际行为是单击Reset按钮后，所有按钮都翻转为unchecked.
演示
这是我的 Plunker 演示。请注意，实际上我是从 Firebase 加载数据。在演示中，我从 myjson.com 加载它。
重现问题的步骤
- 打开这个演示。
- 注意两个
checked按钮和两个unchecked。 - 检查两个
unchecked按钮。 - 单击Reset按钮。
- 注意所有按钮都翻转到
unchecked。
期望的行为是最初unchecked应该是的两个按钮和最初应该是unchecked的两个按钮。checkedchecked
代码
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>返回其初始值后调用该方法或设置属性。