How to sort in ractive.js

Question

I have got the following data (sample):

"data": {
    "eventsHeading": "Upcoming events",
    "eventsToBeDisplayed": 3,
    "allEventLinkText": "See all events",
    "eventsList": [
{
    "eventDate": "23/10/2016",
    "eventTitle": "EVENT INFO 1"
},
{
    "eventDate": "22/10/2016",
    "eventTitle": "EVENT INFO 2"
},
{
    "eventDate": "24/10/2016",
    "eventTitle": "EVENT INFO 3"
},
{
    "eventDate": "21/10/2016",
    "eventTitle": "EVENT INFO 4"
}
    ]
}

And I have something like this:

        <table>
            <tbody>
                {{#eventsList:i}}
                {{#i < eventsToBeDisplayed}}
                    <tr>
                                <td class="date-column">{{eventDate}}</td>
                                <td class="text-link truncate-text"><ux-anchor class="text-link" href="{{link}}">{{eventTitle}}</ux-anchor>
                    </tr>
                {{/}}
                {{/}}
            </tbody>
        </table>

So currently, this will loop to fetch only 3 Data and it will show:

23/10/2016   EVENT INFO 1

22/10/2016   EVENT INFO 2

24/10/2016   EVENT INFO 3

What i want to do is sort first the eventDate so i will fetch the incoming eventDate, so it will be like this:

21/10/2016   EVENT INFO 4

22/10/2016   EVENT INFO 2

23/10/2016   EVENT INFO 1

What is the best approach to do this?

Answer 1

You should sort the data in some lifecycle event (or perhaps on observed changes / custom events?) in your ractive instance. Since you have your dates as date strings, you need to parse them into a date object before you can compare them.

this.set("eventsList",this.get("eventsList").sort( function (a, b) {
    var aParts = a.eventDate.split("/");
    var bParts = b.eventDate.split("/");
    return new Date(aParts[2],aParts[1],aParts[0]) < new Date(bParts[2],bParts[1],bParts[0]) ? -1 : 1;
}));  

Working fiddle: http://jsfiddle.net/pq7yrncv/