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

Question

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

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

现在我想在一个 dom-repeat 中加载多个 iron-forms，每个 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 = []
    ...
}

此时使用断点检查 shadow DOM 表明 dom-repeat 模板尚未加载。有没有一种方法可以等到页面完成加载，或者可能有另一种方法来完成同样的事情？

Answer 1

您可以监听<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>