如何访问可铁擦拭容器中的刷卡纸的详细信息 [英] How to access details of a swiped paper-card in iron-swipeable-container
问题描述
我有一个带有dom-repeat(firebase数据)的可滑动容器
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]]
• [[tcmmessage.update]] • [[tcmmessage.uptime]] </span>
</div>
</paper-card>
</template>
</iron-swipeable-container>
我定义了一个侦听器
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.
推荐答案
在iron-swipe处理程序中使用this.$$('#tcmcard')，您要查询本地DOM的滑动元素，但之前已将其从DOM 中删除触发iron-swipe事件，因此查询不会返回您期望的结果.
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.
但是您不需要查询swiped元素，因为<iron-swipeable-container>使用存储在event.detail.target中的swiped元素触发iron-swipe事件.
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.
尝试一下:
_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>
这篇关于如何访问可铁擦拭容器中的刷卡纸的详细信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
