Почему элемент не перехватывает событие при использовании dispatchEvent из родственного полимерного элемента?

У меня есть следующий полимерный элемент в моем пользовательском интерфейсе, который состоит из двух полимерных элементов: baseline-policy-create и baseline-policy-domain-ajax.

<dom-module id="baseline-policies-tab">
  <template>
    <style include="dfw-styles">
      :host {
        display: block;
      }
    </style>
    <baseline-policy-create></baseline-policy-create>
    <baseline-policy-domain-ajax></baseline-policy-domain-ajax>
  </template>

  <script>

    class BaselinePoliciesTab extends Polymer.Element {
      static get is() {
        return 'baseline-policies-tab';
      }

      static get properties() {
      }
    }
    customElements.define(BaselinePoliciesTab.is, BaselinePoliciesTab);

  </script>
</dom-module>

В моем элементе baseline-policy-create у меня есть раскрывающаяся кнопка, которая позволяет мне выбрать «Пакет» или «Подписка». Когда я выбираю один из них, я отправляю CustomEvent, который должен запускать прослушиватель, который я зарегистрировал в baseline-policy-domain-ajax. Вот код для baseline-policy-create:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../shared-styles.html">
<link rel="import" href="../../bower_components/dfw-styles/dfw-styles.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">

<dom-module id="baseline-policy-create">
  <template>
    <style include="dfw-styles">
      :host {
        display: block;
      }
      .top-button{
        float : right;
      }
    </style>

    <div class="outer-buttons">
      <paper-menu-button horizontal-align="right" no-overlap="true" no-animations class="top-button">
        <paper-button slot="dropdown-trigger" class="dropdown-trigger create-button btn-primary">
          <iron-icon icon="menu"></iron-icon>
          <span>Create Baseline Policy</span>
        </paper-button>
        <paper-listbox slot="dropdown-content" class="dropdown-content">
          <template is="dom-repeat" items="{{_domains}}">
            <paper-item on-tap="_getDomainSchema">[[item.label]]</paper-item>
          </template>
        </paper-listbox>
      </paper-menu-button>
    </div>
  </template>
  <script>
    class BaselinePolicyCreate extends Polymer.Element {
      static get is() {
        return 'baseline-policy-create';
      }

      static get properties() {
        return {
          _domains: {
            type: Array,
            value: [{'name':'Package', 'label':'Package'},
                    {'name':'Subscription', 'label':'Subscription'}] //TODO: is it possible to get these values from an API source
          }
        }
      }

      _getDomainSchema(evt) {
        console.info("Get the schema for the following domain:", evt.target.innerText);
        // fire event here to trigger ajax call in baseline-policy-domain-ajax
        this.dispatchEvent(new CustomEvent('domain-ajax',{detail : evt.target.innerText}));
      }
    }
    customElements.define(BaselinePolicyCreate.is, BaselinePolicyCreate);
  </script>
</dom-module>

А вот код baseline-policy-domain-ajax:

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/polymer.html">


<dom-module id="baseline-policy-domain-ajax">
  <template>
    <style></style>
    <iron-ajax
      id = "getSchema"
      auto = false
      url="<removed-url-for-confidentiality>"
      params='{"domain" : "Package"}'
      handle-as="json"
      on-response="_handleResponse"
      debounce-duration="300">
      </iron-ajax>
  </template>

  <script>
    class BaselinePolicyDomainAjax extends Polymer.Element {
      static get is() { return 'baseline-policy-domain-ajax'; }

      //static get properties() {  }

      //static get observers() {  }

      connectedCallback(){
        super.connectedCallback();
        console.log("ajax element is attached! Register listeners");
        document.addEventListener('domain-ajax',this._editPage.bind(this),true);
      }

      _handleResponse(event, request) {
        console.log ('Handle Response');
        var response = request.response;
        console.log(response);
      }

      _editPage(evt){
        console.log("Change Page to New Baseline Policy");
        console.log(evt.detail);
      }
    }
    customElements.define(BaselinePolicyDomainAjax.is, BaselinePolicyDomainAjax);
  </script>
</dom-module>

Я удалил URL-адрес из соображений конфиденциальности, но протестировал компонент iron-ajax и могу успешно вызывать API.

Журнал не дает мне никаких указаний на то, почему слушатель не «слышит» мое событие от другого полимерного элемента. Любые идеи о том, что я делаю неправильно?


javascript polymer polymer-2.x
person Jvalant Dave    schedule 26.07.2018    source источник
comment
события перемещаются вверх по иерархии, поэтому вы не можете поймать их в одноуровневом элементе, и это не имеет ничего общего с Polymer, это то, как события работают в целом.. здесь вопрос другой, но ответ очень похож: stackoverflow.com/a/50292188/521598   -  person mishu    schedule 27.07.2018
comment
@mishu Это имеет смысл, у вас есть какая-нибудь документация, которая, по вашему мнению, была бы полезна, чтобы научить меня передавать данные от родителя к дочернему? Как вы сказали в своем ответе, для этого требуется привязка данных. Я довольно новичок в веб-разработке, мне бы хотелось получить некоторые рекомендации по этому поводу.   -  person Jvalant Dave    schedule 27.07.2018

Ответы (1)


arrow_upward
1
arrow_downward

как сказал Мишу в комментарии, события поднимаются вверх по иерархии. Итак, в вашем baseline-policies-tab вам нужно поймать это событие и передать его baseline-policy-domain-ajax вручную.

Некоторые примеры:

<dom-module id="baseline-policies-tab">
<template>
<style include="dfw-styles">
  :host {
    display: block;
  }
</style>
<baseline-policy-create on-domain-ajax="_onDomainAjax"></baseline-policy-create>
<baseline-policy-domain-ajax></baseline-policy-domain-ajax>
</template>

<script>

class BaselinePoliciesTab extends Polymer.Element {
  static get is() {
    return 'baseline-policies-tab';
  }

  static get properties() {
  }

  _onDomainAjax(e) {
    this.shadowRoot.querySelector("baseline-policy-domain-ajax")._editPage(e);
  }
}
customElements.define(BaselinePoliciesTab.is, BaselinePoliciesTab);

</script>
</dom-module>
person Kuba Šimonovský    schedule 30.07.2018