在聚合物的子菜单标题中添加事件

Add event to Submenu-title in Polymer

本文关键字：添加 事件 标题 菜单 聚合物      更新时间：2023-12-25

我有以下子菜单代码：

<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>

聚合物加载后会产生以下内容：

<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中。

我试着把它称为"聚合物就绪"事件，但它不起作用。

window.addEventListener('polymer-ready', function(e) {
        $("#submenuItem").on("click",function(){
            var scope = $(this).parent().id;
            callDispatcher(scope);
        });
});

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

不要覆盖组件的功能，而是尝试使用基于Shadow DOM选择器的模板而不是标签属性在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>

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

我最终通过覆盖核心子菜单元素使其工作。

Polymer('core-submenu', {
    activeChanged: function() {
         if (!this.opened){
          var scope = this.id;
          if (scope!="")
              callDispatcher(scope);
         }  
      if (this.hasItems()) {
        this.opened = this.active;
      }
      if (!this.active) {
        this.unselectAllItems();
      }
    }
});
相关文章：