polymer - 聚合物:将纸张标签绑定到核心支架内的核心页

  显示原文与译文双语对照的内容
0 0

我在这里有一个问题,我需要将一个纸张选项卡选择为核心页面内核心页选择。

我已经尝试了绑定纸张标签到核心页面与聚合物的,不工作。

选择了 tabs.addEventListener('core-select',function() { pages.selected = tabs.selected; console 。log (": "+ 选项卡。选定的) ;});

返回控制台上的错误:

 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>

我已经安装了最新版本的文件。 感谢你的帮助 !

时间:原作者:1个回答

0 0

这不是一个聚合物问题,你的选择器是错误的:

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

应该是

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

或者

var tabs = document.querySelector('#ctabs');
原作者:
...