samedi 2 juillet 2016

Limit array of dom-repeat within iron-list

I'm working on the public messaging part of an app right now. I am iterating over a collection of conversations (arrays) to display, which each contain the actual messages of the conversation as an array, so something like:

   [
       ...
       messages: 
       {
         content :"Yo what's up",
         fromUserId:"X7uFeXpm8NtgocQXJ",
         time:"Sun 26 at 19:41",
       }
       ...
   ]

My html & js look like this:

<iron-list items=[[publicMessages]]>
  <template>

      <paper-card elevation='2'>
        <template is='dom-repeat' items='[[limitMessages(item.messages, item)]]'>
          <paper-item>
            [[item.content]]
          </paper-item>
        </template>
        <paper-button on-tap='loadFullConversation'>Load entire conversation</paper-button>
      </paper-card>

  </template>
</iron-list>


limitMessages: function(messages, item) {
  if (!item.messageLimit) {
    messages = messages.slice(0, 3);
  } else {
    messages = messages.slice(0, item.messageLimit);
  }
  return messages;
},
loadFullConversation: function(e) {
  e.model.set('item.messageLimit', 1000);
},

A jsfiddle can be found here: https://jsfiddle.net/kv1vvvw9/1/

I've tried to bind to a property (which doesn't work though since it's tied to the overall component) and experimenting with the model but I just can't get it to work. If I update the model, how could make sure that limitMessages will re-run?

Note, the original messages collection does not contain item.messageLimit. I've just defined this myself in the view part. I don't think it makes sense putting this in the database inserts.

Aucun commentaire:

Enregistrer un commentaire