将Polymer 2.x事件处理程序绑定到全局函数？_Polymer_Polymer 2.x_Polymer Elements_Polymer 2.0

将Polymer 2.x事件处理程序绑定到全局函数？

polymer

将Polymer 2.x事件处理程序绑定到全局函数？,polymer,polymer-2.x,polymer-elements,polymer-2.0,Polymer,Polymer 2.x,Polymer Elements,Polymer 2.0,我有一些不在元素/应用程序中的聚合元素，我不知道如何将它们的事件处理程序（例如单击时的）附加到全局javascript函数例如，假设我的代码如下所示 <head> // Import stuff... function login(){ // Do stuff } </head> <body unresolved> <dom-if id="signInItem"> <

我有一些不在元素/应用程序中的聚合元素，我不知道如何将它们的事件处理程序（例如单击时的

）附加到全局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> &nbsp; Log in</paper-button>
        </template>
    </dom-if>
</body>


//进口东西。。。
函数登录（）{
//做事
}
登录

这是行不通的，因为点击

on-tap

时需要绑定到封闭元素的属性（我猜）。我的选择是什么？

为纸张按钮提供一些id

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

或者，您可以在单独的函数中编写代码

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）中进行监听，如下所示

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

常规onclick=“myFunction（）”事件怎么样？

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