聚合物 2 元素中的铁形式 2.0：功能未定义

Question

尝试在 Polymer 2 元素内复制 https://www.webcomponents.org/element/PolymerElements/iron-form/demo/demo/index.html 的铁型演示，但似乎无法正常工作。

单击“提交”时，我得到 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>

Answer 1

用纸按钮触发事件时必须使用on-click并且不能指定参数。

所以正确的语法是on-click="_delayedSubmit"

Answer 2

要向 DOM 元素添加事件侦听器，您必须在模板中使用 on-event 注释。此外，无论您是否为 event 对象提供名称，event 对象都已传递给您的回调。 Polymer 不支持在事件属性中传递参数。

iron-form 演示页面中显示的示例使用的是 demo-snippet，它既适用于原生元素，也适用于聚合物元素。

因此，您需要更改代码： onclick="_delayedSubmit(event);" 至：on-click="_delayedSubmit".

聚合物 2 元素中的铁形式 2.0：功能未定义

iron-form 2.0 in Polymer 2 element: function not defined

javascript

ecmascript-6

polymer-2.x

iron-form