javascript - 将事件添加到 Polymer 中的子菜单标题

Question

我有以下子菜单代码:

<core-submenu icon="editor:insert-drive-file" label="Docs" class="sub_menu_item" id="docs"> 
        <core-item id="num_docs" class="menu_item" icon="description" label="Num docs" horizontal="" center="" layout=""></core-item>
        <core-item id="num_forms" class="menu_item" icon="receipt" label="Num forms" horizontal="" center="" layout=""></core-item>
        <core-item id="num_presentations" class="menu_item" icon="flip-to-front" label="Num presentations" horizontal="" center="" layout=""></core-item>
    </core-submenu>

加载 polymer 后会生成以下内容:

<core-submenu id="docs" class="sub_menu_item core-selected" label="Docs" icon="editor:insert-drive-file" active="">     
    <core-item id="submenuItem" class="core-selected" on-tap="{{ activate }}" icon="{{icon}}" label="{{label}}" src="{{src}}" layout="" center="" horizontal="">
    <core-menu id="submenu" class="core-collapse-closed" valueattr="{{valueattr}}" selectedattribute="{{selectedAttribute}}" selecteditem="{{selectedItem}}" selected="{{selected}}" style="overflow: hidden; height: 0px;">
    <core-a11y-keys on-keys-pressed="{{ selectPrevious }}" keys="up" target="{{}}"></core-a11y-keys>
    <core-a11y-keys on-keys-pressed="{{ selectNext }}" keys="down" target="{{}}"></core-a11y-keys>
    <core-a11y-keys on-keys-pressed="{{ validateSelected }}" keys="enter" target="{{}}"></core-a11y-keys>
    <core-selection id="selection" hidden="" on-core-select="{{ selectionSelect }}" multi="{{multi}}"></core-selection>
    <core-item id="num_docs" class="menu_item" layout="" center="" horizontal="" label="Num docs" icon="description">
    <core-item id="num_forms" class="menu_item" layout="" center="" horizontal="" label="Num forms" icon="receipt">
    <core-item id="num_presentations" class="menu_item" layout="" center="" horizontal="" label="Num presentations" icon="flip-to-front">

现在，关键是我想向第一个生成的元素(即子菜单的标题)添加单击事件。但我无法做到这一点，因为该元素尚未加载到 DOM 中。

我尝试在“polymer 就绪”事件中调用它，但它不起作用。

window.addEventListener('polymer-ready', function(e) {

        $("#submenuItem").on("click",function(){
            var scope = $(this).parent().id;
            callDispatcher(scope);
        });
});

有人知道如何解决这个问题吗？

Answer 1

不要覆盖组件的功能，而是尝试使用基于 Shadow DOM 选择器的模板而不是 label 属性来在 UI 中显示该元素。

你可以使用类似的东西:

<core-submenu>
    <div class="item-content">
        <a href="*for routing functionality*" on-tap="*for JS funcationality*">Docs</a>
    </div>
    <core-item id="num_docs" class="menu_item" icon="description" label="Num docs" horizontal="" center="" layout=""></core-item>
    ...
</core-submenu>

并且可以绑定(bind)您想要的任何事件，而无需剪切覆盖任何内容。不过，如果您确实更喜欢这条路线，您也可以使用 extends="core-submenu"属性进行扩展，就像 一样。