如何環路ractive.js

我已經得到了以下數據（樣本）：如何環路ractive.js

"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個數據將顯示。

您認爲最好的方法是什麼？

來源

2016-09-07 tachez

您可以添加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> 
    {{/}} 
{{/}}

來源

2016-09-07 14:10:37 martypdx

Hi @martypdx。使用數組索引引用的好方法。奇蹟般有效。謝啦。 – tachez

你也可以使用計算性能 - 我喜歡這樣做，因爲它似乎有點比一個循環更加明確，其中整個身體被包裹在一個如果，你可以重複使用它更容易，你可以做計算或檢查針對其它區域的數據等的子集...

模板

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

腳本（計算與數據同級）

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

來源

2016-09-10 16:52:31 PersonThing

嗨@PersonThing，也謝謝你。是的，我相信這是更可重用的。我也記住這一點。 – tachez

如何環路ractive.js

回答

相關問題