웹 구성 요소 : 클래스에서 함수 정의, 인라인 액세스

Question

웹 사이트를 웹 구성 요소/폴리머로 변환합니다. 내가 필요한 것은 lookupUser()이라는 함수를 폼을 제출할 때 호출하는 것입니다. 그러나 제대로 함수를 정의하는 방법을 잘 모르겠습니다.

---

(단지 관련)

HTML

<form name="userLookupForm" class="search" onsubmit="lookupUser();">

---

자바 스크립트

(function(customElements) { 
class DashboardSearch extends PolymerMixins.LightDomMixin(Polymer.Element) { 
    static get is() { 
     return 'dashboard-search'; 
    } 

    static get config() { 
     return { 
       properties: { 
        user: { 
         type: Object 
        }, 
       }, 
      }; 
     } 

     lookupUser() { 
      if (scope.userlookup) { 
       $state.go('users', { 
        query: scope.userlookup 
       }); 
      } 
     }; 

    } 
    customElements.define(DashboardSearch.is, DashboardSearch); 
})(window.customElements); 

나는 F를 제거 아직 각도를 무시 이 함수를 올바르게 정의하면 어떻게하면 onsubmit에서 호출 할 수 있습니까?

Answer 1

폴리머 템플릿에서 이벤트 청취자는 on-* 주석 구문을 사용하여 선언적으로 추가 할 수 있습니다. onsubmit="lookupUser();" 대신 on-submit="lookupUser"을 사용해야합니다. 값은 메소드의 이름 일뿐입니다. 괄호 또는 데이터 바인딩 대괄호 (on-submit="[[lookupUser]]"은 매우 일반적인 실수입니다).

<form name="userLookupForm" class="search" on-submit="lookupUser"> 

그런 다음 클래스에서 lookupUser 메서드를 정의하려고합니다. addEventListener에 추가 된 이벤트 리스너와 마찬가지로 하나의 인수 인 Event 객체를 수신합니다.

class DashboardSearch extends PolymerMixins.LightDomMixin(Polymer.Element) { 
    static get is() { 
    return 'dashboard-search'; 
    } 
    static get config() { 
    // ... 
    } 

    lookupUser(event) { 
    console.log(event.target); // => logs <form> element 
    } 
} 

이 내용은 공식 문서의 Handle and fire events 섹션에서 다룹니다.