[英]Bind Polymer 2.x event handler to a global function?
我有一些不在元素/應用程序內的Polymer元素，而且我不知道如何將其事件處理程序（例如on-click附加到全局javascript函數。
例如，假設我的代碼看起來像這樣
<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> Log in</paper-button>
</template>
</dom-if>
</body>
這是行不通的，因為on-tap期望綁定到封閉元素的屬性（我想）。 我有什么選擇？
給紙按鈕一些ID
<paper-button id="button"></paper-button>
在javascript中，您可以添加eventlistener，如下所示
this.$.button.addEventListener('click', e => {
console.log("clicked");
// write your code
});
或者您可以在單獨的函數中編寫代碼
ready() {
super.ready();
this.$.button.addEventListener('click', e => this.handleClick(e));
}
handleClick(e) {
console.log(e);
}
如果您想觸發非聚合函數，則可以調用；
this.dispatchEvent(new CustomEvent('login', { bubbles: true, composed: true, detail: true }));
這將在全局js（即main.js）中觸發您的login監聽，如下所示；
addEventListener('login', function (e) {
// Do something for login
})
編輯：我認為您還需要將dom-if更改為dom-bind以便將此代碼作為其根級別進行綁定
您始終可以將對本地類成員函數（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
Polymer 2.x構建錯誤-帶有標識符Polymer.Element的類的多個全局聲明
[英]Polymer 2.x Build Error - Multiple global declarations of class with identifier Polymer.Element
事件處理程序未在聚合物就緒內部觸發：function（）
[英]event handler is not getting triggered inside polymer ready:function()
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.