Question

我有一个带有核心菜单的核心抽屉面板。当我点击菜单选项时，我可以打开drawerPanel。我遇到的问题是，当我点击抽屉面板中的项目时，它不会关闭。我在聚合物项目的spa演示中复制了底部的javascript代码，但它仍然没有关闭。

<template is="auto-binding" id="template">
    <core-drawer-panel id="drawerPanel">
        <core-header-panel drawer id="drawer">
            <core-toolbar id="navheader">
                <span>Menu</span>
            </core-toolbar>
            <core-menu selected="{{option}}" on-core-selected="{{selectedOption}} valueattr="data-category">
                core-items...
            </core-menu>
        </core-header-panel>
    </core-drawer-panel>
</template>

<script>
    var template = document.querySelector('#template');
    var navicon = document.getElementById('navicon');
    var drawerPanel = document.getElementById('drawerPanel');

    navicon.addEventListener('click', function() {
        drawerPanel.togglePanel();
    });

    template.selectedOption = function(detail) {
        if(detail.isSelected) {
            drawerPanel.close();
        }
    }
</script>

Answer 1

您必须先监听template-bound事件，然后才能查询选择器或将侦听器添加到模板内的任何内容。尝试重写它：

<script>
    var template = document.querySelector('#template');
    template.addEventListener('template-bound', function() {
        var navicon = document.getElementById('navicon');
        var drawerPanel = document.getElementById('drawerPanel');

        navicon.addEventListener('click', function() {
            drawerPanel.togglePanel();
        });

        this.selectedOption = function(detail) {
            if(detail.isSelected) {
                drawerPanel.close();
            }
        }
    });
</script>

聚合物抽屉面板不会关闭

1 个答案: