如何在 ractive.js 中排序

Question

我得到了以下数据（样本）：

"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

我想要做的是首先对 eventDate 进行排序，这样我将获取传入的 eventDate，所以它会像这样：

21/10/2016   EVENT INFO 4

22/10/2016   EVENT INFO 2

23/10/2016   EVENT INFO 1

执行此操作的最佳方法是什么？

Answer 1

你应该在你的 ractive 实例中的一些生命周期事件（或者可能是观察到的变化/自定义事件？）中对数据进行排序。由于您将日期作为日期字符串，因此需要先将它们解析为日期对象，然后才能比较它们。

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

工作fiddle：http://jsfiddle.net/pq7yrncv/

如何在 ractive.js 中排序

How to sort in ractive.js

sorting

ractivejs