Пример события из Polymer 3 devguide "Слушатель на внешних элементах" вызывает исключение - PullRequest
Новая
       23

Пример события из Polymer 3 devguide "Слушатель на внешних элементах" вызывает исключение

0 голосов
/ 16 ноября 2018

Я создал пример для фрагментов из руководства разработчика Polymer 3.Этот пример не компилируется, так как _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)

Ответы [ 2 ]

0 голосов
/ 08 апреля 2019

просто чтобы улучшить решение HakanC из документации Polymer 3, я сумел объединить идеи каждого метода без переопределения каких-либо обратных вызовов и сумел придумать следующий метод, который входит в определение класса и вызывается извне;похожи на интерфейсы в 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
  }

достаточно просто для меня ...:)

0 голосов
/ 16 ноября 2018

В приведенном выше примере основная идея заключается в том, если вам нравится слушать событие извне этого пользовательского элемента. Вы можете настроить прослушиватель внутри 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

...