Как сортировать в ractive.js

#sorting #ractivejs

#сортировка #ractivejs

Вопрос:

У меня есть следующие данные (образец):

 "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"
}
    ]
}
  

И у меня есть что-то вроде этого:

         <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>
  

Итак, в настоящее время это будет цикл для извлечения только 3 данных, и он покажет:

 23/10/2016   EVENT INFO 1

22/10/2016   EVENT INFO 2

24/10/2016   EVENT INFO 3
  

Что я хочу сделать, так это сначала отсортировать дату события, поэтому я получу входящую дату события, так что это будет похоже на это:

 21/10/2016   EVENT INFO 4

22/10/2016   EVENT INFO 2

23/10/2016   EVENT INFO 1
  

Каков наилучший подход для этого?

Ответ №1:

Вы должны отсортировать данные в каком-либо событии жизненного цикла (или, возможно, по наблюдаемым изменениям / пользовательским событиям?) в вашем активном экземпляре. Поскольку ваши даты представлены в виде строк date, вам необходимо проанализировать их в объект date, прежде чем вы сможете их сравнить.

 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;
}));  
  

Рабочая скрипка:http://jsfiddle.net/pq7yrncv

Комментарии:

1. Хорошо, я создал отдельный файл *.js для этого события. Итак, в файле *.json должны быть только данные. Большое спасибо за это @Leakim