javascript - 内容中的 polymer 点击事件不会触发？

Question

我是 Polymer 的新手，所以不要攻击我..

如何使用 core-icon-button 单击事件来触发包含在其父 polymer 元素(即 my-component)中的方法。

下面是我正在努力实现的一个例子。你可以看到有一个名为 my-component 的元素，里面有一个 core-icon-button 和一个 on-click 事件.我希望能够从 my-component 中监听事件。我不想将 core-icon-button 放在 my-component 中。

<my-component>
    <core-icon-button
        icon="menu"
        on-click="{{theTrigger}}">
    </core-icon-button>
</my-component>


<polymer-element name="my-component">
    <template>
        <div>  
            <content id="content"></content>
        </div>
    </template>
    <script>
        Polymer({
            theTrigger: function(e){
                console.log('it works');
            }
        });
    </script>
</polymer-element>

Answer 1

我通过添加“eventDelegates”找到了解决问题的方法

<my-component>
    <core-icon-button button-one icon="menu"></core-icon-button>
    <core-icon-button button-two icon="favorite"></core-icon-button>
</my-component>


<polymer-element name="my-component">
    <template>
        <div>
            <content></content>
        </div>
    </template>
    <script>
        Polymer({
            eventDelegates: {
              tap: 'tapHandler'
            },
            tapHandler: function(e) {
                if(e.target.hasAttribute('button-one')){
                    console.log( 'i am button one' );
                }else if(e.target.hasAttribute('button-two')){
                    console.log( 'i am button two' );
                }

            },
        });
    </script>
</polymer-element>