聚合物'detail.item'將不會返回正確的對象

Question

我不能讓上帝的愛得到選擇（或動畫頁面）的工作。我試着按照教程，但他們沒有提到任何地方如何實際執行從一個頁面到另一個頁面的轉換（或者我完全不理解），我的猜測是我應該只需要設置selected的值的core-animated-pages但這也行不通。

首先，detail.item對象似乎並不包含正確的東西。我可能在做一些微不足道的事情。當試圖從on-core-select事件中訪問「detail.item.selectedIndex」時，我只能得到undefined。如果我通過使用：this.$.selector.selectedIndex訪問該屬性，它將工作。

也在做以下似乎什麼都不做：

var pages = this.$.pages; 
pages.selected = selectedIndex; 

請參見下面的代碼來理解我想要做的事：

<!-- 2. Load the component using an HTML Import --> 
... Imports here ... 

<polymer-element name='index-app'> 
    <template> 
    <core-scaffold> 
     <core-header-panel navigation flex mode="seamed"> 
     <core-toolbar>Application</core-toolbar> 
     <core-menu theme="core-light-theme" > 
      <core-selector on-core-select="{{selectAction}}" id="selector"> 
      <core-item icon="settings" label="item1"></core-item> 
      <core-item icon="settings" label="item2"></core-item> 
      </core-selector> 
     </core-menu> 
     </core-header-panel> 
     <div tool>{{item.label}}</div> 
     <div class="content"> 
     <core-animated-pages transitions="cross-fade-all" id="pages" selected="{{selected}}"> 
      <section id="page1" hidden?="{{selected!=0}}"> 
      <div cross-fade>Home page contents</div> 
      </section> 
      <section id="page2" hidden?="{{selected!=1}}"> 
      <div cross-fade>Gallery contents</div> 
      </section> 
     </core-animated-pages> 
     </div> 
    </core-scaffold> 
    </template> 
    <script> 
    Polymer({ 
     ready: function(){ 
     this.$.selector.selected = 0; 
     }, 
     selectAction: function(e, detail){ 
     var selectedIndex = this.$.selector.selectedIndex; 
     var pages = this.$.pages; 
     pages.selected = selectedIndex; 
     } 
    }); 
    </script> 
</polymer-element> 

Answer 1

嘗試使用選擇= {{選擇}}適用於核心選擇器和核心動畫頁面。如果我沒有記錯，發佈的屬性selected綁定到這兩個元素的項目索引。在覈心選擇器中，它將綁定到已選擇的項目的索引，並且核心動畫頁面將拉取綁定值並將其用作抓取頁面並顯示該頁面的索引。

換句話說，您不需要事件處理程序或手動操作隱藏元素。數據綁定系統爲您處理這一切。