CODEWITHSUNDEEP
polymer
Wolfgang Tober
Wolfgang Tober

Reputation: 63

How can I "refresh" iron-swipeable-container after a change of data in firebase

My code with swipable-container and dom-repeat of firebase-data

<iron-swipeable-container id="teamchat">
    <paper-card class="swipe item blue">

      <template is="dom-repeat" items="[[tcmmessages]]" as="tcmmessage">
        <div class="card-content">
          <b>[[tcmmessage.teamname]]</b><br>  
          [[tcmmessage.beitrag]]<br>

          <span class="chatmetadata">von [[tcmmessage.username]]
                &bull; [[tcmmessage.update]] &bull; [[tcmmessage.uptime]] </span>
        </div>
      </template>

    </paper-card>
</iron-swipeable-container>

I have defined a listener

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

and remove the firebase-data with '_onTeamChatSwipe'.

That work fine!

But when there is new firebase-data, how can I bring the iron-swipeable-container back again without refreshing the entire page? I don't find a solution.

Upvotes: 1

Views: 321

Answers (1)

tony19
tony19

Reputation: 138336

It looks like you've created just one paper-card that contains multiple messages. When the card is swiped away, your code has no template to refill the container.

Did you actually mean to create a card for each message? That would require moving paper-card inside the template repeater like this:

<iron-swipeable-container id="teamchat">
  <template is="dom-repeat" items="[[tcmmessages]]" as="tcmmessage">
    <paper-card class="swipe item blue">
      <div class="card-content">
        <b>[[tcmmessage.teamname]]</b><br>  
        [[tcmmessage.beitrag]]<br>

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

When tcmmessages refills (via Firebase), the iron-swipeable-container automatically repopulates with a paper-card per message.

Here's a demo of similar code that shows that behavior:

<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">
        <template is="dom-repeat" items="[[items]]">
          <paper-card heading="{{item}}" 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];
              }
            }
          },
          _clearListAfterDelay: function(delay) {
            this.async(function() {
              this.set('items', []);
            }, delay);
          },
          _refillListAfterDelay: function(delay) {
            this.async(function() {
              this.push('items', 4);
              this.push('items', 5);
            }, delay);
          },
          ready: function() {
            this._clearListAfterDelay(1000);
            this._refillListAfterDelay(2000);
          }
        });
      });
    </script>
  </dom-module>
</body>

codepen

Upvotes: 1

Related Questions