How to access details of a swiped paper-card in iron-swipeable-container

问题

I have a swipeable-container with a dom-repeat (firebase data)

<iron-swipeable-container id="teamchat">
    <template is="dom-repeat" items="[[tcmmessages]]" as="tcmmessage">

      <paper-card id="tcmcard" class="swipe item blue" data-index$="[[tcmmessage.__firebaseKey__]]">
        <div class="card-content">
          <b>[[tcmmessage.teamname]]</b>
          <paper-icon-button style="color: red;" on-tap="_startChat" icon="communication:chat"></paper-icon-button><br>  
          [[tcmmessage.beitrag]]<br>

          <span class="chatmetadata">von [[tcmmessage.username]]
          &bull; [[tcmmessage.update]] &bull; [[tcmmessage.uptime]] </span>
        </div>
      </paper-card>
    </template>
</iron-swipeable-container>

I defined a listener

listeners: {
    'teamchat.iron-swipe': '_onTeamChatSwipe'
    },

I try to access data-index from the swiped paper-card.

_onTeamChatSwipe: function() {

 var card = this.$$('#tcmcard'); 
 var key = card.getAttribute("data-index");

but after swipe event I can not access data-index of the swiped card.

回答1:

With this.$$('#tcmcard') in the iron-swipe handler, you're querying the local DOM for the swiped element, but it's removed from the DOM before the iron-swipe event fires, so the query would not return what you'd expect.

But you don't need to query for the swiped element because <iron-swipeable-container> fires the iron-swipe event with the swiped element stored in event.detail.target.

Try this:

_onTeamChatSwipe: function(e) {
  var card = e.detail.target; 
  var key = card.getAttribute("data-index");

  // simpler syntax to get `data-index`
  // key = card.dataset.index;
}

<head>
  <base href="https://polygit.org/polymer+1.4.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-card/paper-card.html">
  <link rel="import" href="iron-swipeable-container/iron-swipeable-container.html">
  <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
</head>

<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <style include="iron-flex">
      paper-card {
        margin-bottom: 16px;
      }
    </style>
    <template>
      <iron-swipeable-container class="container" on-iron-swipe="_onSwipe">
        <template is="dom-repeat" items="[[items]]">
          <paper-card heading="{{item}}" data-index$="{{index}}" class="layout vertical">
            <div class="card-content">
              Swipe me left or right
            </div>
          </paper-card>
        </template>
    </iron-swipeable-container>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          properties : {
            items: {
              type: Array,
              value: function() {
                return [1,2,3];
              }
            }
          },
          _onSwipe: function(e) {
            var card = e.detail.target;
            console.log(card.getAttribute('data-index'));

            // simpler syntax to get 'data-index'
            console.log(card.dataset.index);
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

来源：https://stackoverflow.com/questions/37533158/how-to-access-details-of-a-swiped-paper-card-in-iron-swipeable-container

标签

polymer

polymer-1.0