[英]iron-form 2.0 in Polymer 2 element: function not defined
试图在Polymer 2元素中复制来自https://www.webcomponents.org/element/PolymerElements/iron-form/demo/demo/index.html的铁形演示,但似乎无法获得它工作。
单击Submit时,我得到Uncaught ReferenceError: _delayedSubmit is not defined
。 有什么建议么?
JSBin : https : //jsbin.com/pinasum/edit ? html,console,output
代码 :
<dom-module id="spp-login">
<template>
<iron-form id="loginForm">
<form action="/login" method="post">
<paper-input name="username" label="Username" required auto-validate></paper-input>
<paper-input name="password" label="Password" required auto-validate></paper-input>
<paper-button raised onclick="_delayedSubmit(event);" disabled id="loginFormSubmit">
<paper-spinner id="spinner" hidden></paper-spinner>
Submit
</paper-button>
<paper-button raised onclick="loginForm.reset();">Reset</paper-button>
</form>
<div class="output"></div>
</iron-form>
</template>
<script>
class SppLogin extends Polymer.Element {
static get is() {
return 'spp-login';
}
static get properties() {
return {
username: String,
password: String,
};
}
connectedCallback() {
super.connectedCallback();
const loginForm = this.$.loginForm;
const spinner = this.$.spinner;
const loginFormSubmit = this.$.loginFormSubmit;
loginForm.addEventListener('iron-form-submit', (event) => {
this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
spinner.active = false;
spinner.hidden = true;
loginFormSubmit.disabled = false;
});
loginForm.addEventListener('change', (event) => {
loginFormSubmit.disabled = !loginForm.validate();
});
loginForm.addEventListener('iron-form-presubmit', (event) => {
event.preventDefault();
console.log('here');
});
}
_delayedSubmit(event) {
const loginForm = this.$.loginForm;
const spinner = this.$.spinner;
spinner.active = true;
spinner.hidden = false;
loginForm.disabled = true;
// Simulate a slow server response.
setTimeout(function() {
loginForm.submit();
}, 1000);
}
}
window.customElements.define(SppLogin.is, SppLogin);
</script>
</dom-module>
要向DOM元素添加事件侦听器,您必须在模板中使用事件上的注释。 另外,你是否为提供名称event
对象与否, event
对象已经被传递给你的回调。 Polymer
不支持在事件属性中传递参数。
iron-form
演示页面中显示的示例使用的是demo-snippet
,它既适用于原生元素,也适用于聚合物元素。
因此,您需要更改代码: onclick="_delayedSubmit(event);"
to: on-click="_delayedSubmit"
。
使用纸质按钮触发事件时,必须使用on-click
并且无法指定参数。
所以正确的语法是on-click="_delayedSubmit"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.