Question

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

如何使用'core-icon-button'点击事件来触发包含在其父聚合物元素（即'my-component'）内的方法。

下面是我想要实现的一个例子。你可以看到有一个名为'my-component'的元素，里面有一个带有点击事件的'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

通过添加＆＃39; eventDelegates＆＃39;

，我找到了解决问题的方法

<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

对于未来的访问者，以下是如何处理＆＃34;点击＆＃34;当不使用<content></content>标签时，这与@ 7immy要求的标签略有不同解决了。（使用较新的Polymer v1.0.0约定）。 初学者注意：不要忘记导入纸质材料，纸张图标按钮，纸张对话框等，并实例化组件以完全运行此样本。

请注意，我们正在使用聚合物＆＃34;点击＆＃34; 而不是＆＃34; onclick＆＃34;

<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

简短的回答是＆＃34;你不能＆＃34;。 theTrigger方法在diff范围内，然后core-icon-button导致该方法位于my-component元素的shadowDom中。你可以把按钮放在元素内，它会工作。另外，你必须制作另一个方法来定位my-component元素并调用方法

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

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

3 个答案: