在 Polymer 中向 Submenu-title 添加事件

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-ready' 事件中调用它，但它不起作用。

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

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

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

Answer 1

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

Answer 2

不要覆盖组件的功能，而是尝试使用基于阴影 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" 属性进行扩展，就像 .

在 Polymer 中向 Submenu-title 添加事件

Add event to Submenu-title in Polymer

javascript

jquery

polymer