Question

在Polymer 2.0中提交之前，我一直使用以下语法来编辑铁表格请求：

connectedCallback() {
    super.connectedCallback();
    someForm.addEventListener('iron-form-presubmit, function() {...})
}

现在，我想在dom重复中加载多个铁型，每个铁型都具有相同的铁型预提交功能。表格的数量和内容是使用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模板尚未加载。有没有办法我可以等到页面完成加载，或者有其他方法可以完成同一件事？

Answer 1

您可以收听<dom-repeat>的{{1}}事件，该事件在模板内容更改时发生。然后，事件处理程序可以使用dom-change获取对querySelectorAll的引用：

模板：

<iron-form>

脚本：

<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>上使用annotated event listener：

模板：

<iron-form>

脚本：

<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);
});

如何在dom-repeat模板中将EventListener添加到加载了Iron-ajax的Polymer 2.0铁表单中

1 个答案: