从polymer.dom(事件)获取子元素

抓住元素 paper-ripple的最佳方法是为动画结束事件附加事件侦听器吗？该元素将在DOM重复中。我尝试从Polymer.dom(event).localTarget;养育孩子，但没有成功。on-tap需要留在父母中。

    <div on-tap="goToSingleListing" data-listingID="[[url.listing_id]]">
     <paper-ripple></paper-ripple>

  ...
  goToSingleListing: function(event) {
    var el = Polymer.dom(event).localTarget;
    var firstChildElementName = Polymer.dom(el).firstChild;
     ...
    firstChildElementName.addEventListener('transitionend', ()=> {
      page(url);
    });

，而不是试图从tap事件处理程序中获取对<paper-ripple>的引用，您可以直接在<paper-ripple>上使用带注释的事件侦听器进行transitionend事件。

// dom-module template
<template is="dom-repeat" items="[[items]]">
  <div on-tap="...">
    <paper-ripple on-transitionend="_onItemTransitionEnd"></paper-ripple>
  </div>
</template>
// dom-module script
Polymer({
  ...
  _onItemTransitionEnd: function(e) {
    ...
  }
}

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    _onItemTap: function(e) {
      console.log('tap', e.model.index);
    },
    _onItemTransitionEnd: function(e) {
      console.log('transitionend', e.model.index);
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-ripple/paper-ripple.html">
</head>
<body>
  <x-foo></x-foo>
  <dom-module id="x-foo">
    <template>
      <template is="dom-repeat" items="[1,2,3,4]">
        <div on-tap="_onItemTap">
          <h2>Item [[item]]</h2>
          <paper-ripple on-transitionend="_onItemTransitionEnd"></paper-ripple>
        </div>
      </template>
    </template>
  </dom-module>
</body>

codepen

相关内容

最新更新

热门标签：