數據綁定 - 在另一個自定義元素內的2個自定義元素之間進行通信

my-app是一個自定義元素，它包含兩個需要彼此通信的其他自定義元素。當我單擊標題元素上的按鈕時，我想要抽屜元素打開/關閉。我正在嘗試使用數據綁定進行消息傳遞，但我無法使其正常工作。數據綁定 - 在另一個自定義元素內的2個自定義元素之間進行通信

我想我可能不得不爲此使用鐵信號，但我想知道爲什麼數據綁定在這種情況下不起作用。

父元素 - 我的應用程序內

<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>

子元素 - 我的頭

<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>

來源

2016-06-23 jess

它適用於我只是複製和粘貼。你確定你已經加載了'app-layout'嗎？ – miyamoto

@miyamoto我仔細檢查了我的導入並導入了my-drawer在my-app中缺失。我可以發誓我已經加了它。非常感謝你的幫助，非常抱歉。我應該刪除這個問題嗎？ – jess

由你決定。我會說更多的東西，我預計你的元素在目前的結構上會遇到問題。我建議將'my-header'和'my-drawer'中的'app-header'和'app-drawer'元素移動到你的'my-app'元素，並使用'my-header'和'my-drawer'作爲這些元素的內容孩子。這將所有定義頁面佈局的元素保存在一個地方，我相信'app-header-layout'正確工作是必要的。 – miyamoto

問題已解決。我的部分有一個導入錯誤。請參閱有關問題的評論。

來源

2016-06-25 19:24:01 jess

數據綁定 - 在另一個自定義元素內的2個自定義元素之間進行通信

回答

相關問題