폴리머 : 코어 - 스캐 폴드 내부의 코어 페이지에 종이 탭을 바인딩합니다.

여기에 문제가 있습니다. paper-tab 선택을 core-scaffold 안에있는 core-pages 선택으로 바인딩해야합니다.폴리머 : 코어 - 스캐 폴드 내부의 코어 페이지에 종이 탭을 바인딩합니다.

는 이미 Binding Paper-Tabs to Core-Pages with Polymer을 시도하고 작동하지 않습니다 :

<!doctype html> 
<html> 

    <head> 

     <title>Test Page</title> 

     <meta name="viewport" 
       content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> 

     <script src="../components/platform/platform.js"></script> 

     <link rel="import" href="../components/polymer/polymer.html"> 
     <link rel="import" href="../components/font-roboto/roboto.html"> 
     <link rel="import" href="../components/core-header-panel/core-header-panel.html"> 
     <link rel="import" href="../components/core-toolbar/core-toolbar.html"> 
     <link rel="import" href="../components/paper-tabs/paper-tabs.html"> 
     <link rel="import" href="../components/paper-button/paper-button.html"> 
     <link rel="import" href="../components/paper-icon-button/paper-icon-button.html"> 
     <link rel="import" href="../components/core-icons/core-icons.html"> 
     <link rel="import" href="../components/core-drawer-panel/core-drawer-panel.html"> 
     <link rel="import" href="../components/core-scaffold/core-scaffold.html"> 
     <link rel="import" href="../components/core-menu/core-menu.html"> 
     <link rel="import" href="../components/core-menu/core-submenu.html"> 
     <link rel="import" href="../components/core-pages/core-pages.html"> 
     <link rel="import" href="../components/core-item/core-item.html"> 
     <link rel="import" href="../components/core-collapse/core-collapse.html"> 
     <link rel="import" href="../components/core-style/core-style.html"> 


     <style> 
      html,body { 
       height: 100%; 
       margin: 0; 
       background-color: #E5E5E5; 
       font-family: 'RobotoDraft', sans-serif; 
      } 
      .container { 
       width: 100%; 
       margin: 50px auto; 
      } 
      .heading { 
       padding: 10px 15px; 
       background-color: #f3f3f3; 
       border: 1px solid #dedede; 
       border-top-left-radius: 5px; 
       border-top-right-radius: 5px; 
       font-size: 18px; 
       cursor: pointer; 
       -webkit-user-select: none; 
       -moz-user-select: none; 
       -ms-user-select: none; 
       user-select: none; 
       -webkit-tap-highlight-color: rgba(0,0,0,0); 
      } 
      .content { 
       position: relative; 
       padding: 15px; 
       border: 1px solid #dedede; 
       border-top: none; 
       border-bottom-left-radius: 5px; 
       border-bottom-right-radius: 5px; 
       height:100vh; 
      } 
      @media (min-width: 481px) { 
       #tabs { 
        width: 200px; 
       } 
       .container { 
        width: 400px; 
       } 
      } 
      core-header-panel { 
       height: 100%; 
       overflow: auto; 
       -webkit-overflow-scrolling: touch; 
      } 
      core-toolbar { 
       background: #03a9f4; 
       color: white; 
      } 
      #ctabs { 
       width: 100%; 
       margin: 0; 
       -webkit-user-select: none; 
       -moz-user-select: none; 
       -ms-user-select: none; 
       user-select: none; 
       text-transform: uppercase; 
      } 

     </style> 

    </head> 

    <body unresolved> 

    <core-scaffold> 

     <core-header-panel navigation flex> 
      <core-toolbar id="navheader"> 
       <span>Menu</span> 
      </core-toolbar> 
      <core-menu> 
       <core-submenu icon="settings" label="Select Level"> 
        <core-submenu icon="settings" label="1"> 

        </core-submenu> 
       </core-submenu> 

      </core-menu> 
     </core-header-panel> 

     <span tool>Learning Portal V1.0</span> 

     <div class="content"> 

      <core-toolbar> 
       <paper-tabs id="ctabs" self-end selected="0"> 
         <paper-tab name="all">All</paper-tab> 
         <paper-tab name="favorites">Favorites</paper-tab> 
        </paper-tabs> 
       </core-toolbar> 

      <core-pages selected="1" id="cpages"> 
       <div> 
        <paper-button raised style="width: 150px; height: 150px"/> 
       </div> 
       <div> 
        <core-menu> 
         <core-submenu label="I. Units & Measurement"> 
          <span>Data goes here!</span> 
         </core-submenu> 
        </core-menu> 
       </div>  
      </core-pages> 
     </div> 
    </core-scaffold> 

    <script> 

var tabs = document.querySelector('ctabs'); 
var pages = document.getElementById('cpages'); 

if(!tabs) 
{ 
    console.log("tab is not found!"); 
} 

if(tabs) 
{ 
    console.log("tab is found!"); 
} 

tabs.addEventListener('core-select',function(){ 
    pages.selected = tabs.selected; 
    console.log("Selected: " + tabs.selected); 
}); 

//function myFunction() { 
//  console.log("Selected: " + tabs.selected); 
//} 
    </script> 

</body> 

</html>

: 여기

tab is not found! index.html:147 Uncaught TypeError: Cannot read property 'addEventListener' of null

페이지에서 전체 코드입니다 :

tabs.addEventListener('core-select',function() 
{ 
    pages.selected = tabs.selected; 
    console.log("Selected: " + tabs.selected); 
});

콘솔에 오류를 반환

필자는 필요한 파일과 함께 최신 버전을 설치했습니다. 도움에 미리 감사드립니다!

출처

2014-10-29 RootInfinity

이것은 폴리머 문제가 아닙니다. 당신의 선택이 잘못 :

var tabs = document.querySelector('ctabs');

이

var tabs = document. getElementById('ctabs');

또는

이어야한다

var tabs = document.querySelector('#ctabs');

출처

2014-10-29 05:57:22 DocDude

감사합니다, 나는 또 다른 질문, 왜이 폴리머 요소 내에 작동하지 않습니다을해야합니까; var tabs = document.querySelector ('# ctabs'); 하지만이 작동; var tabs = this. $. ctabs; – RootInfinity

요소의 그림자 DOM 내부에있는 내용에 액세스하려고하면'document.querySelector'가 작동하지 않습니다. 이는 그림자 DOM에있는 주 문서 트리가 아니기 때문입니다. '/ deep /'결합자를 사용하여 그림자 루트 안에있는 요소를 찾을 수 있습니다. ('document.querySelector ('html/deep/#ctabs');). Polymer 요소 내부에서보다 유용한 패턴은이'this. $ '해시를 사용하거나 그림자 DOM에 컨테이너를 만들고 컨테이너에'querySelector'를 사용하는 것입니다. 둘 다 여기에 설명되어 있습니다 : https://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding – DocDude

폴리머 : 코어 - 스캐 폴드 내부의 코어 페이지에 종이 탭을 바인딩합니다.

답변

관련 문제