如何在可熨烫的容器

时间:2016-05-30 20:20:43

标签: polymer polymer-1.0

我有一个带有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]]
          &bull; [[tcmmessage.update]] &bull; [[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"); 

但是在刷卡事件后我无法访问刷卡的数据索引。

1 个答案:

答案 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;
}

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

codepen