Dom重复动态标头

Question

I am using Polymer to fetch data from a firebase database and show it on the screen. The idea is to get a list of dates and show headers above a date, every time it is a new month.

For example, the following list would be generated (if correctly generated, format of the date is dd/mm/yyyy):

January
01-01-2015
05-01-2015

February
02-02-2015

April
02-04-2015

I have the following code to generate the dates:

<template is="dom-repeat" items="[[dates]]" as="date">
    <date this-date="[[date]]" class="date"></date>
</template>

I can't find a way to show a header on top of every new month. dom-repeat appends every new element before the last, so I wasn't able to generate a header in the dom-repeat itself.

Could anybody help me with this?

Answer 1

I am not sure exactly what is delivering your "dates" property to this bit of code, but I would have tried way (computed property?) or returning a month, with all the dates from the month as an array property of the month object.

Then you could have nested templates, the first repeating on the months, the second repeating on the month.dates from the first. The header would then fit just above the nested template.