Polymer 2.x 이벤트 처리기를 전역 함수에 바인딩합니까?

요소/앱 안에없는 일부 Polymer 요소가 있는데 전역 처리 함수에 on-click과 같은 이벤트 처리기를 연결하는 방법을 알아낼 수 없습니다.Polymer 2.x 이벤트 처리기를 전역 함수에 바인딩합니까?

예를 들어, on-tap는 바깥 쪽 요소 (내 생각)의 속성에 바인딩 할 것으로 예상하기 때문에 내 코드는,이 작동하지 않습니다이

<head> 
    // Import stuff... 

    function login(){ 
     // Do stuff 
    } 
</head> 
<body unresolved>  
    <dom-if id="signInItem"> 
     <template> 
      <paper-button on-tap="login"><iron-icon icon="icons:account-circle"></iron-icon> &nbsp; Log in</paper-button> 
     </template> 
    </dom-if> 
</body>

같이 보입니다 가정 해 봅시다. 내 옵션은 무엇입니까?

출처

2017-11-22 BadCash

일반 onclick = "myFunction()"이벤트는 어떨까요? –

종이 버튼에 대한 몇 가지 ID를 제공

this.$.button.addEventListener('click', e => { 
    console.log("clicked"); 
    // write your code 
    });

아래에 표시하거나 별도의 기능에 코드를 작성할 수있는 당신의 EventListener를 추가 할 수 있습니다 자바 스크립트

<paper-button id="button"></paper-button>

ready() { 
    super.ready(); 
    this.$.button.addEventListener('click', e => this.handleClick(e)); 
} 
handleClick(e) { 
    console.log(e); 
}

출처

2017-11-22 17:11:42 rajashekar

폴리머가 아닌 기능을 사용하려면 전화하십시오.

this.dispatchEvent(new CustomEvent('login', { bubbles: true, composed: true, detail: true }));

이 login 글로벌 JS에서 듣고 당신의 발광합니다 아래 (즉, main.js를.)

addEventListener('login', function (e) { 
     // Do something for login 

})

편집 : 나는 당신이 또한 변경할 필요가 있다고 생각 DOM-경우 루트 수준에서 그와 같은 코드를 결합하기 위해 DOM-바인딩에

출처

2017-11-22 17:54:41 HakanC

할 수 있습니다 항상 앞으로 로컬 클래스 멤버 함수를 호출 글로벌 네임 스페이스 (MyElement.login) :

이

/* 1 */ class MyElement extends Polymer.Element { 
/* 2 */  // ... 
/* 3 */  
/* 4 */  login: (() => (evt) (MyGlobalNamespace || window).login.bind(this))() 
/* 5 */ }

심지어 주변의 폐쇄 기능을 생략 할 수 있습니다 - 당신이 login의 구현에서 this를 사용하지 않는 경우 -로 라인 4 단순화 : login: (MyGlobalNamespace || window).login

출처

2017-11-27 09:48:30 craPkit

Polymer 2.x 이벤트 처리기를 전역 함수에 바인딩합니까?

답변

관련 문제