Polymer 2 元素中的 iron-form 2.0:函数未定义
2017-08-14
579
尝试在 Polymer 2 元素内复制来自 https://www.webcomponents.org/element/PolymerElements/iron-form/demo/demo/index.html 的 iron-form 演示之一,但似乎无法使其正常工作。
单击“提交”时,我收到
Uncaught ReferenceError: _delayedSubmit 未定义
。有什么建议吗?
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>
2个回答
要将事件侦听器添加到 DOM 元素,您必须在模板中使用
on-
event
注释。
此外,无论您是否为
event
对象提供名称,
event
对象都已传递给您的回调。
Polymer
不支持在事件属性中传递参数。
iron-form
演示页面中显示的示例使用
demo-snippet
,它既适用于原生元素,也适用于聚合物元素。
因此,您需要将代码从:
onclick="_delayedSubmit(event);"
更改为:
on-click="_delayedSubmit"
。
Ofisora
2017-08-14
当使用纸张按钮触发事件时,您必须使用
on-click
,并且不能指定参数。
因此,正确的语法应该是
on-click="_delayedSubmit"
daKmoR
2017-08-14