[英]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.