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

【问题标题】：Bind Polymer 2.x event handler to a global function?将 Polymer 2.x 事件处理程序绑定到全局函数？
【发布时间】：2017-11-27 17:48:30
【问题描述】：

我有一些不在元素/应用程序中的 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> &nbsp; Log in</paper-button>
        </template>
    </dom-if>
</body>

这不起作用，因为on-tap 期望绑定到封闭元素的属性（我猜）。我有哪些选择？

【问题讨论】：

常规的 onclick="myFunction()" 事件怎么样，会成功吗？

标签： polymer polymer-2.x polymer-elements polymer-2.0

【解决方案1】：

给纸按钮一些 id

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

在javascript中你可以添加如下所示的事件监听器

    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);
}

【讨论】：

【解决方案2】：

如果你想触发一个不在聚合物中的函数，你可以调用；

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

这将触发你的login 监听全局 js（即 main.js），如下所示；

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

})

编辑：我认为您还需要将 dom-if 更改为 dom-bind 以便将此代码绑定为根级别

【讨论】：

【解决方案3】：

您始终可以将对本地类成员函数 (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

【讨论】：