Polymer Js 的自定义菜单元素单击事件

Question

我为菜单创建了一个简单的聚合物自定义元素。

我知道，聚合物已经具有用于创建菜单的元素，但我正在创建一个将在您的网站上显示菜单的组件。

现在，这是我的 menu.html（自定义元素）

<link rel="import" href="../bower_components/polymer/polymer.html">    
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/core-item/core-item.html">
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">

<polymer-element name="my-menu">
    <template>

        <style>

          core-header-panel {
            background: white;
          }
          core-toolbar {
            background-color: #03A9F4;
          }
          #navheader {
            background-color: #56BA89;
          }
          .content {
            padding: 20px;
          }
          /* drawer is always visible on a wide screen
             so menu button isn't required */
          core-drawer-panel:not([narrow]) #navicon {
            display: none;
          }
        </style>

        <core-drawer-panel id="drawerPanel">

            <core-header-panel drawer>
                <core-toolbar id="navheader">
                    <span>Menu</span>
                </core-toolbar>
                <core-menu>
                    <core-item label="One"></core-item>
                    <core-item label="Two"></core-item>
                </core-menu>
            </core-header-panel>

            <core-header-panel main>
                <core-toolbar id="mainheader">
                    <paper-icon-button id="navicon" icon="menu" on-click="{{togglemenu}}"></paper-icon-button>
                    <span flex>Title</span>
                </core-toolbar>
                <div class="content">
                    If drawer is hidden, press button to display drawer.
                </div>
            </core-header-panel>
      </core-drawer-panel>
    </template>
    <script>
        Polymer('my-menu', {
            ready: function () {
                // alert("hello");

            },
            togglemenu: function () {
                var drawerPanel = document.getElementById('drawerPanel');
                // drawerPanel.togglePanel();
                console.log(drawerPanel);
            }
        });
    </script>
</polymer-element>

现在，

如你所见，调用 togglemenu 函数时，我想切换面板，但我做不到。

无论如何要实现这个？

Answer 1

当您在自定义元素内部工作时，您可以使用聚合物 select 或 select 阴影中的元素 dom。这将使您的 togglemenu 功能看起来更像

       togglemenu: function () {
            var drawerPanel = this.$.drawerPanel;
            drawerPanel.togglePanel();
        }

在此函数 this.$.drawerPanel 中 select 与 document.getElementById('drawerPanel') 的方式相同，除了 getElementById 是在文档级别查找而不是此元素阴影 dom.

Polymer Js 的自定义菜单元素单击事件

Custom Menu element click event for Polymerjs

javascript

polymer