2017-08-14 101 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

要添加事件偵聽器的DOM元素,你在你的模板中使用導通事件註解。 另外,無論您是否提供event對象的名稱,event對象都已傳遞給您的回調。 Polymer不支持在事件屬性中傳遞參數。

iron-form演示頁面中顯示的示例使用demo-snippet,適用於本地元素以及聚合物元素。

因此,您需要將您的代碼從: onclick="_delayedSubmit(event);" 更改爲:on-click="_delayedSubmit"

1

觸發你必須使用on-click,你不能指定參數文件按鈕的事件時。

所以正確的語法將on-click="_delayedSubmit"