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

Question

我有一些不在元素/应用程序内的 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期望绑定到封闭元素的属性（我猜）。我有哪些选择？

score 1 · Accepted Answer

give some id for paper-button

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

in javascript you can add eventlistener as shown below

    this.$.button.addEventListener('click', e => {
    console.log("clicked");
     // write your code 
    });

or you can write your code in seperate function

ready() {
  super.ready();
  this.$.button.addEventListener('click', e => this.handleClick(e));
}
handleClick(e) {
   console.log(e);
}

score 0 · Accepted Answer

如果您想触发不在聚合物中的功能，您可以调用；

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 以便将此代码绑定为根级别

score 0 · Accepted Answer

您始终可以将对本地类成员函数 (MyElement.login) 的调用转发到全局命名空间：

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

你甚至可以省略周围的闭包函数 - 如果你没有this在 - 的实现中使用，将login第 4 行简化为：login: (MyGlobalNamespace || window).login

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

3 回答 3

Related

Reference