内容内的聚合物点击事件不会触发？

Question

我对 Polymer 很陌生，所以不要拍我..

我如何使用core-icon-button点击事件来触发包含在其父聚合物元素 aka my-component 。

下面是我试图实现的一个例子。 您可以看到有一个名为my-component的元素，其中有一个带有on-click事件的core-icon-button 。 我希望能够从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>

Answer 2

对于未来的访问者，以下是不使用<content></content>标签时如何处理“点击”的示例，这与@7immy 询问和解决的问题略有不同。 （使用较新的 Polymer v1.0.0 约定）。 初学者注意：不要忘记导入 paper-material、paper-icon-button、paper-dialog 等，并实例化组件以完全运行此示例。

请注意，我们使用的是聚合物的"on-click"而不是"onclick" 。

<dom-module id="x-sample">
  <template>
    <paper-material elevation="1">
      <div class="horizontal layout">
        <span class="paper-font-body2 flex">Location Information</span>
          <paper-icon-button icon="info" data-dialog="location-info" on-click="openDialog"></paper-icon-button>
      </div>
    </paper-material>

    <paper-dialog id="location-info">
      <div>
        test
      </div>
    </paper-dialog>

  </template>
</dom-module>

<script>
  Polymer({
    is: 'x-sample',
    openDialog: function(e) {
      var button = e.target;
      while (!button.hasAttribute('data-dialog') && button !== document.body) {
        button = button.parentElement;
      }

      if (!button.hasAttribute('data-dialog')) {
        return;
      }
      var id = button.getAttribute('data-dialog');
      var dialog = document.getElementById(id);
      if (dialog) {
        dialog.open();
      }
    }
  });
</script>

Answer 3

简短的回答是“你不能”。 theTrigger 方法在 diff 范围内，然后核心图标按钮导致该方法位于 my-component 元素的 shadowDom 中。 您可以将按钮放在元素内，它会起作用。 否则，您必须创建另一个以 my-component 元素为目标的方法并调用该方法

document.querySelector('my-component').theTrigger();