Question

我有一些不在元素/ app中的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期望绑定到封闭元素的属性（我猜）。我有什么选择？

Answer 1

为纸质按钮提供一些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);
}

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

Answer 3

您始终可以将对本地类成员函数（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 2.x事件处理程序绑定到全局函数？

3 个答案: