Polymer 2.xイベントハンドラをグローバル関数にバインドしますか？

私は要素/アプリケーションの中にいないポリマー要素をいくつか持っており、グローバルハンドブック関数に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を追加することができますJavaScriptで

<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 

})

編集：私はあなたが常にローカルクラスのメンバ関数へのコールを転送することができ、そのルートレベルで

出典

2017-11-22 17:54:41 HakanC

としてあなたもこのコードをバインドするために、DOM-場合DOMバインドへの変更する必要があると思います（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イベントハンドラをグローバル関数にバインドしますか？

答えて

関連する問題