Question

我在这里遇到问题，我需要将paper-tab选项绑定到core-pages内的core-scaffold选项。

我已经尝试Binding Paper-Tabs to Core-Pages with Polymer并且无法正常工作：

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

在控制台上返回错误：

找不到
标签！ index.html的：147 未捕获的TypeError：无法读取属性＆＃39; addEventListener＆＃39;为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>

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

Answer 1

这不是聚合物问题;你的选择器错了：

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

应该是

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

或

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

聚合物：将纸张标签绑定到核心支架内的核心页面

1 个答案: