我有一个带有dom-repeat（firebase数据）的可滑动容器
<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]]
• [[tcmmessage.update]] • [[tcmmessage.uptime]] </span>
</div>
</paper-card>
</template>
</iron-swipeable-container>
我定义了一个监听器
listeners: {
'teamchat.iron-swipe': '_onTeamChatSwipe'
},
我尝试从刷卡纸上访问数据索引。
_onTeamChatSwipe: function() {
var card = this.$$('#tcmcard');
var key = card.getAttribute("data-index");
但是在刷卡事件后我无法访问刷卡的数据索引。
答案 0 :(得分：1)
在this.$$('#tcmcard')处理程序中使用iron-swipe，您需要查询本地DOM以获取刷卡元素，但在 之前将其从DOM 中删除触发iron-swipe事件，因此查询不会返回您期望的内容。
但是您不需要查询刷卡元素，因为<iron-swipeable-container>使用iron-swipe中存储的滑动元素触发event.detail.target事件。
试试这个：
_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>