Переключить диалоговое окно бумаги, которое находится в пользовательском элементе Polymer

Question

Я довольно новичок, когда дело доходит до разработки с использованием Polymer и JavaScript, и у меня есть ощущение, что способ переключения диалогового окна на бумаге - не самый лучший способ или его можно улучшить. В настоящее время я пытаюсь вызвать функцию toggle() из-за пределов пользовательского элемента, он работает для меня, хотя я получаю ошибку
Я создал пользовательский элемент под названием my-dialog:

<dom-module id="my-dialog">
  <template>
    <style>
      :host {
        display: inline-block;
      }
    </style>

    <paper-dialog id="popUp" with-backdrop on-iron-overlay-opened="patchOverlay">
      <!-- Dialog content -->
      <h2>Hello World</h2>
    </paper-dialog>

  </template>

  <script>
    Polymer({
      is: 'my-dialog',

    });
  </script>
</dom-module>

На одной из моих страниц я теперь хочу открывать и закрывать диалоговое окно при нажатии на бумажную кнопку. Это работает нормально, но, как я упоминал выше, у меня есть ощущение, что это не совсем профессионально, чем я там занимаюсь.

<dom-module id="my-profile-view">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <paper-fab icon="create" id="myBtn" on-tap="toggleDialog"></paper-fab>        
    <my-dialog id="myDialog"></my-dialog>

  </template>

  <script>
    Polymer({
      is: 'my-profile-view',

      //Open dialog
      toggleDialog: function() {
        var dialog = this.shadowRoot.querySelector('#myDialog');
        var popUp = dialog.shadowRoot.querySelector('paper-dialog');
        popUp.toggle();
      },
    });
  </script>
</dom-module>

Сообщение об ошибке Я получаю в моей консоли:

(программа):5 Uncaught TypeError: Невозможно прочитать свойство 'removeAttribute' с нулевым значением (анонимная функция) @ (программа):5(анонимная функция) @ (программа):20

Было бы здорово, если бы кто-то мог прояснить ситуацию для меня. И, может быть, дать мне подсказку, что я мог бы сделать еще.

Answer 1

Ваш второй элемент my-profile-view не должен знать внутреннюю логику вашего первого элемента my-dialog,

Вместо этого ваш обычный диалог должен предоставлять публичный метод (т.е. toggleDialog).

мой-dialog.html <script> :

Polymer({
  is: 'my-dialog',
  toggleDialog: function () {
    this.$.popUp.toggle()
  }
});

Этот метод может быть вызван вашим вторым элементом.

мой-профиль-view.html <script> :

Polymer({
  is: 'my-profile-view',
  //Open dialog
  toggleDialog: function() {
    this.$.myDialog.toggleDialog()
  }
});