如何循环 ractive.js

Question

我得到了以下数据（示例）：

"data": {
        "eventsHeading": "Upcoming events",
        "eventsToBeDisplayed": 3,
        "allEventLinkText": "See all events",
        "eventsList": [
    {
        "eventDate": "22/12/2015",
        "eventTitle": "EVENT INFO 1"
    },
    {
        "eventDate": "22/12/2015",
        "eventTitle": "EVENT INFO 2"
    },
    {
        "eventDate": "14/01/2016",
        "eventTitle": "EVENT INFO 3"
    },
    {
        "eventDate": "14/01/2016",
        "eventTitle": "EVENT INFO 4"
    }
        ]
    }

我有这样的东西：

{{#eventsList}}
    <tr>
        <td class="date-column">{{eventDate}}</td>
        <td class="text-link truncate-text"><span decorator="tooltip:{{eventTitle}}" tabindex="0">{{eventTitle}}</span>
    </tr>
{{/}}

现在它只会打印 eventList 的所有数据。我想要做的是添加一个 for 循环，例如

i=0;i<={{eventsToBeDisplayed}};i++

所以只有 3 个数据会显示。

您认为最好的方法是什么？

Answer 1

您可以添加一个 indexer to the loop 然后在循环内进行条件过滤：

{{#eventsList:i}}
    {{# i < eventsToDisplay}}
    <tr>
        <td class="date-column">{{eventDate}}</td>
        <td class="text-link truncate-text"><span decorator="tooltip:{{eventTitle}}" tabindex="0">{{eventTitle}}</span>
    </tr>
    {{/}}
{{/}}

Answer 2

您也可以使用计算属性 - 我喜欢这样做，因为它看起来比整个主体都包裹在 if 中的循环更明确一些，您可以更轻松地重用它，您可以进行计算或检查针对其他领域的数据子集等...

模板

{{#topEvents}}
    <tr>...</tr>
{{/}}

脚本（计算结果与数据处于同一水平）

computed: {
    topEvents: function(){
        return this.get('eventsToDisplay').slice(0, this.get('eventsToBeDisplayed'));
    }
}

如何循环 ractive.js

How to loop in ractive.js

ractivejs