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

现在，关键是我要将click事件添加到第一个生成的元素（子菜单的标题）。但是我无法做到这一点，因为该元素仍未加载到DOM中。

我试图在聚合物准备好的内部打电话给它。事件，但它无法正常工作。

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

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

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

Answer 1

不要覆盖组件的功能，而是尝试使用基于阴影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>

并且可以访问您喜欢的任何事件，而不必删除任何内容。但是，如果您真的更喜欢这条路线，那么您也可以使用extends =“core-submenu”属性进行扩展，就像那样做。

Answer 2

我终于通过覆盖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();
      }
    }
});

将事件添加到Polymer中的Submenu-title

2 个答案: