核心菜單內的聚合物核心崩潰

我無法正常打開核心菜單的核心崩潰部分中的鏈接。我認爲這是非常基本的，但我是Polymer新手，剛剛學習繩索。我可能在這裏有額外的代碼，但在遵循SPA示例之後，我想設置類似的東西，而不需要基於特殊腳本的鏈接。但是現在，當我點擊我的子菜單時，「教師頁面2」和「教師頁面3」的鏈接不起作用，並且最終的菜單標題（帳戶餘額圖標）會將您帶到「教師頁面2」。這裏是我的代碼：核心菜單內的聚合物核心崩潰

<body unresolved fullbleed> 
    <template is="auto-binding"> 
    <core-scaffold id="scaffold"> 
    <nav> 
     <core-toolbar><span>Menu</span></core-toolbar> 
     <core-menu valueattr="hash" selected="{{route}}"> 
     <core-item icon="social:school" label="students" onclick="document.querySelector('#smenu').toggle();"> 
     </core-item> 
     <core-collapse id="smenu"> 
     <paper-item hash="students" noink> 
      <core-icon icon="label-outline"></core-icon> 
      <a href="#students">Student Page</a> 
     </paper-item> 
     </core-collapse> 
    <core-item icon="social:people" label="teachers" onclick="document.querySelector('#tmenu').toggle();"> 
    </core-item> 
    <core-collapse id="tmenu"> 
     <paper-item hash="teachers1" noink> 
     <core-icon icon="label-outline"></core-icon> 
     <a href="#teachers1">Teacher Page 1</a> 
    </paper-item> 
    <paper-item hash="teachers2" noink> 
    <core-icon icon="label-outline"></core-icon> 
    <a href="#teachers2">Teacher Page 2</a> 
    </paper-item> 
    <paper-item hash="teachers3" noink> 
    <core-icon icon="label-outline"></core-icon> 
    <a href="#teachers3">Teacher Page 3</a> 
    </paper-item> 
</core-collapse> 
<core-icon icon="account-balance" label="support"></core-icon> 
</core-menu> 
</nav> 
<!-- flex makes the bar span across the top of the main content area --> 
<core-toolbar tool flex> 
    <!-- flex spaces this element and jusifies the icons to the right-side --> 
    <div flex>Application</div> 
    <core-icon-button icon="refresh"></core-icon-button> 
    <core-icon-button icon="add"></core-icon-button> 
</core-toolbar> 
<div layout horizontal center-center fit> 
<core-animated-pages valueattr="hash" selected="{{route}}" transitions="slide-from-right"> 
    <section hash="students" layout vertical center-center> 
    <div>Student Home</div> 
    </section> 
    <section hash="students2" layout vertical center-center> 
    <div> 
    Student Page 1 
    </div> 
    </section> 
    <section hash="teachers" layout vertical center-center> 
    <div>Teacher Home</div> 
    </section> 
    <section hash="teachers1" layout vertical center-center> 
    <div>Teacher Materials 1</div> 
    </section> 
    <section hash="teachers2" layout vertical center-center> 
    <div>Teacher Materials 2</div> 
    </section> 
    <section hash="teachers3" layout vertical center-center> 
    <div>Teacher Materials 3</div> 
    </section> 
</core-animated-pages> 
</div> 
</core-scaffold> 
</template> 
</body>

來源

2014-12-19 master_chef

這裏有一個Plunker工作如預期，並根據您的代碼： http://plnkr.co/edit/6MKF2uni2p6g6jlY0uzP?p=preview

我用<core-submenu>代替<core-collapse>，因爲它似乎在最後迭代預想方式的聚合物。

爲了使子菜單選擇我不得不做一些自定義方法處理程序。我認爲可以有一個更清潔的方式，但我今天沒有找到:)

希望它有幫助！

代碼的相關大部分：

<polymer-element name="my-core-menu" attributes="route"> 
    <template> 
    <core-toolbar><span>Menu</span></core-toolbar> 
    <h1>Route: {{route}}</h1> 
    <core-menu id="menu" on-core-select="{{mainMenuSelected}}"> 
     <core-submenu icon="social:school" label="Students" hash="students" > 
     <core-item icon="label-outline" label="Student Page" on-click="{{menuItemSelected}}"></core-item>   
     </core-submenu> 
     <core-submenu icon="social:school" label="Teachers" hash="teachers" > 
     <core-item icon="label-outline" label="Teacher Page 1" hash="teachers1" on-click="{{menuItemSelected}}"></core-item> 
     <core-item icon="label-outline" label="Teacher Page 2" hash="teachers2" on-click="{{menuItemSelected}}"></core-item> 
     <core-item icon="label-outline" label="Teacher Page 3" hash="teachers3" on-click="{{menuItemSelected}}"></core-item>  
     </core-submenu> 

     <core-icon icon="account-balance" label="support"></core-icon> 
    </core-menu> 
    </template> 
    <script> 
    Polymer("my-core-menu", { 
    route: "students", 
    mainMenuSelected:function(event, detail, sender) { 
     if (detail.isSelected) { 
     console.log("tick! "+detail.item.getAttribute("hash")) 
     this.route = detail.item.getAttribute("hash"); 
     } 
    }, 
    menuItemSelected: function(event, detail, sender) { 
     this.route = sender.getAttribute("hash"); 
    } 
    }); 
</script> 
</polymer-element>

來源

2014-12-19 14:54:49 LostInBrittany

在'你Plunker的'核心submenu'與標籤標籤'=「教師」的我，核心menu''應該有'哈希=」教師「而不是」hash =「teachers1」'。但除此之外 - 很好的解決方案。 – zunder 2014-12-19 16:58:58

謝謝！現在糾正錯誤:) – LostInBrittany 2014-12-21 10:56:48

謝謝！對不起，遲遲沒有回到這個......我感謝幫助！ – 2015-07-08 21:11:14

核心菜單內的聚合物核心崩潰

回答

相關問題