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中循环

2 个答案: