Alternating colors inside <Each Items>

Hello, I’m trying to add an alternate background color in a list of elements, but can’t find the way of doing it… this is what I have:

<Each Items="{topArtists.top_domestic}">
    <ArtistItem Background="{alternateColor}">
                <Set rootNav.Active="ticketList"/>

Tried a function called “alternateColor” to cycle between two colors, but no success…

ArtistItem is the one whose background want to cycle.

Any ideas?

You could assign a sequential index var to each top_domestic in JS, then in an alternateColor function (which lives on top_domestic) you can mod that to 2 and return alternate colors.


If you over your items, then second argument the function accepts is the index of the item. You can then do as suggested above:

<App Theme="Basic">
            var Observable = require("FuseJS/Observable");

            var items = Observable("item1", "item2", "item3",

            var viewItems =, index){
                return { text:item, color: (index % 2 == 0) ? [1,0,0,1] : [0,1,1,1] };

            module.exports = {
                viewItems: viewItems
                <Each Items="{viewItems}">
                    <Rectangle Fill="{color}" Height="60">
                        <Text Value="{text}" />

Here i’m just assigning a color based on the mod(2) result.

Works great, thank you both! (still getting used to fusetooling!)