폴리머를 사용하여 토글 메뉴 만들기

Question

폴리머로 토글 메뉴를 만들려고합니다. 내가 원하는 것은 간단합니다. 항목을 클릭하면 관련된 div 만 내용으로 표시하려고합니다. 저는 여러분에게 메뉴와 내용 레이아웃을 제공하는 core-scalffold 요소를 사용하고 있습니다.

폴리머 구성 요소 및 이벤트를 사용하여이를 수행하는 가장 좋은 방법은 무엇입니까?

<core-scaffold> 
    <core-header-panel navigation flex> 
    <core-toolbar id="navheader"> 
    </core-toolbar> 
    <core-menu> 
     <core-item label="Content 1"></core-item> 
     <core-item label="Content 2"></core-item> 
    </core-menu> 
    </core-header-panel> 

    <span tool>Title</span> 

    <div class="content1"> 
     Hi there content1! 
    </div> 
    <div class="content2"> 
     Hi there content2! 
    </div> 
</core-scaffold> 

Answer 1

core-pages 요소는 선택 섹션을 만드는 방법을 제공하므로이 콘텐츠 div를위한 좋은 선택이 될 것입니다. 그런 다음 core-menu과 core-pages은 모두 selected 속성을 가지고 있기 때문에 두 요소를 쉽게 바인딩 할 수 있습니다. Polymer 데이터 바인딩을 사용하려면 템플릿을 사용해야합니다.

<template is="auto-binding"> 

    <core-scaffold> 

    <core-header-panel navigation flex> 
     <core-toolbar id="navheader"> 
     </core-toolbar> 
     <core-menu selected="0" selectedIndex="{{selected}}"> 
     <core-item label="Content 1"></core-item> 
     <core-item label="Content 2"></core-item> 
     </core-menu> 
    </core-header-panel> 

    <span tool>Title {{selected}}</span> 

    <core-pages selected="{{selected}}"> 
     <div class="content1"> 
      Hi there content1! 
     </div> 
     <div class="content2"> 
      Hi there content2! 
     </div> 
    </core-pages> 

    </core-scaffold> 

</template> 

참고 : 우리는 자동 바인딩 템플릿에 모든 것을 넣어 경우 우리는 다음과 같이 뭔가를 얻을 나는 그래서 기본 설정을위한 selected를 사용할 수 core-menu의 selectedIndex 속성을 바인딩.

http://jsbin.com/wivec/1/edit

당신이 정말로 바인딩 대신 이벤트를 사용하는 솔루션을 원하는 경우 알려주세요.