聚合物：将核心支架内的纸张选项卡绑定到核心页面

我在这里遇到问题，我需要将paper-tab选择与core-scaffold中的core-pages选择绑定。聚合物：将核心支架内的纸张选项卡绑定到核心页面

我已经尝试Binding Paper-Tabs to Core-Pages with Polymer，而不是工作：

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

返回控制台上的错误：

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

下面是从页面的完整代码：

<!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>

我有安装了所需文件的最新版本。在此先感谢您的帮助！

来源

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 2014-10-30 23:47:05

如果您试图访问元素的影子DOM内的某些内容，“document.querySelector”不起作用，因为它不是主文档树 - 它在影子DOM中。您可以使用'/ deep /'combinator查找任何影子根内部的元素。（'document.querySelector（'html/deep/#ctabs'）;'）。 Polymer元素中更有用的模式是使用这个'this。$'散列（就像你所拥有的），或者在影子DOM中创建一个容器并在容器上使用'querySelector'。这两个描述在这里：https://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding – DocDude 2014-10-31 20:55:49

聚合物：将核心支架内的纸张选项卡绑定到核心页面

回答

相关问题