2017-08-14 11 views
1

ポリマー2の要素の中でhttps://www.webcomponents.org/element/PolymerElements/iron-form/demo/demo/index.htmlから鉄の形のデモを複製しようとしています。ポリマー2の要素の鉄の形2.0:機能が定義されていない

[送信]をクリックすると、Uncaught ReferenceError: _delayedSubmit is not definedと表示されます。助言がありますか?

JSBinhttps://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> 
+1

以下の助けを借りて、私はコードを修正してそれを行う必要があります。上記のコードには他のエラーがありました。固定コードはここにあります:https://jsbin.com/dobayax/1/edit?html,console,output – ModernDeveloperLLC

答えて

2

だろう、あなたはあなたのテンプレートにオンイベント注釈を使用する必要があります。 また、eventオブジェクトの名前を指定するかどうかにかかわらず、eventオブジェクトはすでにコールバックに渡されています。 Polymerは、イベント属性で引数を渡すことをサポートしていません。

iron-formのデモページに表示されている例は、ポリマーエレメントとネイティブエレメントの両方で動作するdemo-snippetを使用しています。

コードを onclick="_delayedSubmit(event);" からon-click="_delayedSubmit"に変更する必要があります。

1

紙ボタンでイベントをトリガーするときにon-clickを使用するために持っていて、パラメータを指定することはできません。

だから、正しい構文は、要素をDOMにイベントリスナーを追加するにはon-click="_delayedSubmit"

関連する問題