코어 메뉴 내부의 폴리머 코어 붕괴

코어 메뉴의 코어 붕괴 섹션에서 링크를 올바르게 열지 못했습니다. 나는 이것이 정말로 기본적인 것이라고 생각하지만, 나는 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

감사! 이제 슬립을 수정하십시오 :) – LostInBrittany

고마워요! 죄송합니다 지연에 대한 답변을 얻으려면 ... 나는 도움을 주셔서 감사합니다! –

코어 메뉴 내부의 폴리머 코어 붕괴

답변

관련 문제