来自 Polymer 3 devguide "Listener on outside elements" 的事件示例抛出异常

Question

我已经根据 Polymer 3 开发指南为 snippets 创建了示例。此示例无法编译，因为 _myLocationListener 未定义且在构造函数中使用。开发指南片段中也未定义侦听器。

this._myLocationListener 属性应该如何初始化。

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

/**
 * @customElement
 * @polymer
 */
class XcustomElementEventHandlingApp extends PolymerElement {
    static get template() {
        return html`
      <style>
        :host {
          display: block;
          border: dotted;
          background: aliceblue;
        }
      </style>
      <h2>Hello [[prop1]]!</h2>
      <button on-click="handleClick">Kick Me</button>
      <div id="child-el-01">Please, check the logs in Console (dev tools).</div>
    `;
    }

    static get properties() {
        return {
            prop1: {
                type: String,
                value: 'xcustom-element-event-handling-app'
            }
        };
    }

    constructor() {
        super();

        this._boundListener = this._myLocationListener.bind(this);
    }

    ready() {
        super.ready();
        this.addEventListener('click', this._onClick);

        const childElement = this.shadowRoot.getElementById('child-el-01');
        childElement.addEventListener('click', this._onClick.bind(this));
        childElement.addEventListener('mouseover', event => this._onHover(event));


        console.log('(this, the) custom element added to DOM.');
    }

    handleClick() {
        console.log('Ow!');
    }

    _onClick(event) {
        this._makeCoffee();
    }

    _makeCoffee() {
        console.log('in _makeCoffee()')
    }

    _onHover(event) {
        console.log('_onHover(ev) called');
        console.log(JSON.stringify(event));
    }

    connectedCallback() {
        super.connectedCallback();
        window.addEventListener('hashchange', this._boundListener);
    }

    disconnectedCallback() {
        super.disconnectedCallback();
        window.removeEventListener('hashchange', this._boundListener);
    }
}

window.customElements.define('xcustom-element-event-handling-app', XcustomElementEventHandlingApp);

package.json:

{
  "name": "xcustom-element-event-handling",
  "description": "event handling demo. From dev guide.",
  "dependencies": {
    "@polymer/polymer": "^3.0.0"
  },
  "devDependencies": {
    "@webcomponents/webcomponentsjs": "^2.0.0",
    "wct-browser-legacy": "^1.0.0"
  }
}

抛出以下异常：

Uncaught TypeError: this._myLocationListener.bind is not a function
at new XcustomElementEventHandlingApp (xcustom-element-event-handling-app.js:36)

Answer 1

在上面的示例中，主要思想是您是否喜欢从该自定义元素外部侦听事件。您可以在 connectedCallback 中设置一个侦听器并使用 disconnectedCallback 将其删除，然后在事件发生后在元素中分配一个函数。像

index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script type="module" src="x-custom.js"></script>
  </head>
  <body>
    <button>This button not in the element</button>
    <x-custom></x-custom>
  </body>
</html>

x-custom.js:

import { PolymerElement, html } from 'https://unpkg.com/@polymer/polymer@3.0.0-pre.12/polymer-element.js';

class XCustom extends PolymerElement {
  static get template() {
        return html`<h2>Hello </h2> `;
  }

    constructor() {
        super();
        this._boundListener = this._myLocationListener.bind(this);
    }

    connectedCallback() {
        super.connectedCallback();
        window.addEventListener('click', this._boundListener);
    }

    disconnectedCallback() {
        super.disconnectedCallback();
        window.removeEventListener('click', this._boundListener);
    }
    _myLocationListener(){
        alert('This click comes from index.html - out of this element')
    }
}

window.customElements.define('x-custom', XCustom);

DEMO

Answer 2

只是为了改进 Polymer 3 文档中的 HakanC 解决方案，我设法在不覆盖任何回调的情况下结合了每种方法的思想，并设法提出了 class 定义中的以下方法，并且是外部调用；类似于 JAVA.

中的界面

  public setOnClickListener(method): void {
    const self = this;
    $(self).on('click', method.bind(self);
    //  or self.addEventListener('click', method.bind(self)); if you use typescript
  }

对我来说足够简单...:)

来自 Polymer 3 devguide "Listener on outside elements" 的事件示例抛出异常

Event example from Polymer 3 devguide "Listener on outside elements" throws an exception

javascript

web-component

polymer-3.x