Связывание данных - связь между двумя настраиваемыми элементами внутри другого настраиваемого элемента

Question

my-app - это настраиваемый элемент, который содержит два других настраиваемых элемента, которые должны взаимодействовать друг с другом. Когда я нажимаю кнопку на элементе заголовка, я хочу, чтобы элемент ящика открывал/закрывал. Я пытаюсь использовать привязку данных для обмена сообщениями, но я не могу заставить его работать.

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

Родительский элемент - мое-приложение

<dom-module id="my-app"> 
    <template> 
     <app-header-layout has-scrolling-region> 
      <my-header drawer-active="{{drawerState}}"></my-header> 
      <div id="main-content" class=""> 
       <div class="imgWrap"><img src="../images/banner.jpg"></img> 
       </div> 
      </div> 
      <my-drawer drawer-opened="{{drawerState}}"></my-drawer> 
     </app-header-layout> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-app', 
     properties: { 
      drawerState: { 
       type: Boolean, 
       value: false, 
       notify: true 
      } 
     } 
    }); 
    </script> 
</dom-module> 

Child Element - мой заголовок

<dom-module id="my-header"> 
    <template> 
     <app-header> 
      <app-toolbar> 
       <div class="logo"><img src="../images/logo.svg"></img> 
       </div> 
       <paper-icon-button icon="menu" on-tap="toggleDrawer"></paper-icon-button> 
      </app-toolbar> 
     </app-header> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-header', 
     properties: { 
      drawerActive: { 
       type: Boolean, 
       value: false, 
       notify: true 
      } 
     }, 
     toggleDrawer: function() { 

      this.drawerActive = !this.drawerActive; 
     } 
    }); 
    </script> 
</dom-module> 

Дочернего элемент - мой-ящик

<dom-module id="my-drawer"> 
    <template> 
     <app-drawer align="end" opened="{{drawerOpened}}"> 
      <paper-menu> ... </paper-menu> 
     </app-drawer> 
    </template> 
    <script> 
    Polymer({ 
     is: 'my-drawer', 

     properties: { 
      drawerOpened: { 
       type: Boolean, 
       value: false, 
       notify: true 
      } 
     } 

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

Answer 1

Проблема решена. С моей стороны произошла ошибка импорта. См. Комментарии к вопросу.