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