如何将 EventListener 添加到在 dom-repeat 模板中加载了 iron-ajax 的 Polymer 2.0 iron-forms
How to addEventListener to Polymer 2.0 iron-forms loaded with iron-ajax within dom-repeat template
在 Polymer 2.0 中提交之前,我一直在使用以下语法来编辑铁形式的请求:
connectedCallback() {
super.connectedCallback();
someForm.addEventListener('iron-form-presubmit, function() {...})
}
现在我想在 dom-repeat 中加载多个 iron-form,每个都具有相同的 iron-form-presubmit 函数。使用 iron-ajax 从服务器加载表单的数量和内容。我打算遍历所有表单并添加事件侦听器,但似乎当我调用以下内容时,表单尚未加载,因此 allForms 为空。
HTML:
<iron-ajax auto
id="requestSchedules"
url="/api/v2/schedules"
handle-as="json"
on-response="handleApiResponse"
last-response="{{schedules}}">
</iron-ajax>
<dom-repeat items="[[schedules]]">
<template>
<paper-card heading="Schedule">
<div class="card-content">
<iron-form id="scheduleForm[[item.id]]">
...
Javascript:
connectedCallback() {
super.connectedCallback();
var allForms = this.shadowRoot.querySelectorAll("iron-form");
// here allForms = []
...
}
此时用断点检查阴影 DOM 显示 dom-repeat 模板尚未加载。有什么方法可以让我等到页面加载完成,或者有其他方法可以完成同样的事情吗?
您可以监听 <dom-repeat>
的 dom-change
事件,该事件在模板内容更改时发生。然后事件处理程序可以使用 querySelectorAll
获取对 <iron-form>
s:
的引用
模板:
<dom-repeat on-dom-change="_onDomRepeatChange">
脚本:
_onDomRepeatChange(e) {
const forms = this.shadowRoot.querySelectorAll('iron-form');
Array.from(forms).forEach(form => {
form.addEventListener('iron-form-presubmit', function() {
this.request.method = 'post';
this.request.params['foo'] = true;
});
});
}
window.addEventListener('WebComponentsReady', () => {
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
_onDomRepeatChange(e) {
const forms = this.shadowRoot.querySelectorAll('iron-form');
Array.from(forms).forEach(form => {
form.addEventListener('iron-form-presubmit', function() {
this.request.method = 'post';
this.request.params['foo'] = true;
});
form.addEventListener('iron-form-response', e => {
const response = e.detail.response;
this.formResponse = JSON.stringify(response, null, 2);
});
});
}
}
customElements.define(XFoo.is, XFoo);
});
<head>
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="iron-form/iron-form.html">
<link rel="import" href="paper-card/paper-card.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<iron-ajax auto
id="requestSchedules"
url="https://httpbin.org/anything"
method="POST"
handle-as="json"
content-type="application/json"
body='[{"id":1, "x":1},{"id":2, "x":2}]'
last-response="{{schedules}}">
</iron-ajax>
<template is="dom-repeat" items="[[schedules.json]]" on-dom-change="_onDomRepeatChange">
<paper-card heading="Schedule">
<div class="card-content">
<iron-form id="scheduleForm[[item.id]]">
<form action="https://httpbin.org/post">
<input name="name" type="text" placeholder="Name">
<button>Submit</button>
</form>
</iron-form>
</div>
</paper-card>
</template>
<pre>[[formResponse]]</pre>
</template>
</dom-module>
</body>
或者,您可以在 <iron-form>
上使用 annotated event listener:
模板:
<iron-form on-iron-form-presubmit="_onIronFormPresubmit">
脚本:
_onIronFormPreSubmit(e) {
const ironForm = e.composedPath()[0];
ironForm.request.method = 'post';
ironForm.request.params['foo'] = true;
}
window.addEventListener('WebComponentsReady', () => {
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
_onIronFormPreSubmit(e) {
const ironForm = e.composedPath()[0];
ironForm.request.method = 'post';
ironForm.request.params['foo'] = true;
}
_onIronFormResponse(e) {
const response = e.detail.response;
this.formResponse = JSON.stringify(response, null, 2);
}
}
customElements.define(XFoo.is, XFoo);
});
<head>
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="iron-form/iron-form.html">
<link rel="import" href="paper-card/paper-card.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<iron-ajax auto
id="requestSchedules"
url="https://httpbin.org/anything"
method="POST"
handle-as="json"
content-type="application/json"
body='[{"id":1, "x":1},{"id":2, "x":2}]'
last-response="{{schedules}}">
</iron-ajax>
<template is="dom-repeat" items="[[schedules.json]]">
<paper-card heading="Schedule">
<div class="card-content">
<iron-form id="scheduleForm[[item.id]]"
on-iron-form-presubmit="_onIronFormPreSubmit"
on-iron-form-response="_onIronFormResponse">
<form action="https://httpbin.org/post">
<input name="name" type="text" placeholder="Name">
<button>Submit</button>
</form>
</iron-form>
</div>
</paper-card>
</template>
<pre>[[formResponse]]</pre>
</template>
</dom-module>
</body>
在 Polymer 2.0 中提交之前,我一直在使用以下语法来编辑铁形式的请求:
connectedCallback() {
super.connectedCallback();
someForm.addEventListener('iron-form-presubmit, function() {...})
}
现在我想在 dom-repeat 中加载多个 iron-form,每个都具有相同的 iron-form-presubmit 函数。使用 iron-ajax 从服务器加载表单的数量和内容。我打算遍历所有表单并添加事件侦听器,但似乎当我调用以下内容时,表单尚未加载,因此 allForms 为空。
HTML:
<iron-ajax auto
id="requestSchedules"
url="/api/v2/schedules"
handle-as="json"
on-response="handleApiResponse"
last-response="{{schedules}}">
</iron-ajax>
<dom-repeat items="[[schedules]]">
<template>
<paper-card heading="Schedule">
<div class="card-content">
<iron-form id="scheduleForm[[item.id]]">
...
Javascript:
connectedCallback() {
super.connectedCallback();
var allForms = this.shadowRoot.querySelectorAll("iron-form");
// here allForms = []
...
}
此时用断点检查阴影 DOM 显示 dom-repeat 模板尚未加载。有什么方法可以让我等到页面加载完成,或者有其他方法可以完成同样的事情吗?
您可以监听 <dom-repeat>
的 dom-change
事件,该事件在模板内容更改时发生。然后事件处理程序可以使用 querySelectorAll
获取对 <iron-form>
s:
模板:
<dom-repeat on-dom-change="_onDomRepeatChange">
脚本:
_onDomRepeatChange(e) {
const forms = this.shadowRoot.querySelectorAll('iron-form');
Array.from(forms).forEach(form => {
form.addEventListener('iron-form-presubmit', function() {
this.request.method = 'post';
this.request.params['foo'] = true;
});
});
}
window.addEventListener('WebComponentsReady', () => {
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
_onDomRepeatChange(e) {
const forms = this.shadowRoot.querySelectorAll('iron-form');
Array.from(forms).forEach(form => {
form.addEventListener('iron-form-presubmit', function() {
this.request.method = 'post';
this.request.params['foo'] = true;
});
form.addEventListener('iron-form-response', e => {
const response = e.detail.response;
this.formResponse = JSON.stringify(response, null, 2);
});
});
}
}
customElements.define(XFoo.is, XFoo);
});
<head>
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="iron-form/iron-form.html">
<link rel="import" href="paper-card/paper-card.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<iron-ajax auto
id="requestSchedules"
url="https://httpbin.org/anything"
method="POST"
handle-as="json"
content-type="application/json"
body='[{"id":1, "x":1},{"id":2, "x":2}]'
last-response="{{schedules}}">
</iron-ajax>
<template is="dom-repeat" items="[[schedules.json]]" on-dom-change="_onDomRepeatChange">
<paper-card heading="Schedule">
<div class="card-content">
<iron-form id="scheduleForm[[item.id]]">
<form action="https://httpbin.org/post">
<input name="name" type="text" placeholder="Name">
<button>Submit</button>
</form>
</iron-form>
</div>
</paper-card>
</template>
<pre>[[formResponse]]</pre>
</template>
</dom-module>
</body>
或者,您可以在 <iron-form>
上使用 annotated event listener:
模板:
<iron-form on-iron-form-presubmit="_onIronFormPresubmit">
脚本:
_onIronFormPreSubmit(e) {
const ironForm = e.composedPath()[0];
ironForm.request.method = 'post';
ironForm.request.params['foo'] = true;
}
window.addEventListener('WebComponentsReady', () => {
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
_onIronFormPreSubmit(e) {
const ironForm = e.composedPath()[0];
ironForm.request.method = 'post';
ironForm.request.params['foo'] = true;
}
_onIronFormResponse(e) {
const response = e.detail.response;
this.formResponse = JSON.stringify(response, null, 2);
}
}
customElements.define(XFoo.is, XFoo);
});
<head>
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="iron-form/iron-form.html">
<link rel="import" href="paper-card/paper-card.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<iron-ajax auto
id="requestSchedules"
url="https://httpbin.org/anything"
method="POST"
handle-as="json"
content-type="application/json"
body='[{"id":1, "x":1},{"id":2, "x":2}]'
last-response="{{schedules}}">
</iron-ajax>
<template is="dom-repeat" items="[[schedules.json]]">
<paper-card heading="Schedule">
<div class="card-content">
<iron-form id="scheduleForm[[item.id]]"
on-iron-form-presubmit="_onIronFormPreSubmit"
on-iron-form-response="_onIronFormResponse">
<form action="https://httpbin.org/post">
<input name="name" type="text" placeholder="Name">
<button>Submit</button>
</form>
</iron-form>
</div>
</paper-card>
</template>
<pre>[[formResponse]]</pre>
</template>
</dom-module>
</body>