Alternating colors inside <Each Items>

How-to Discussions
1

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}">
          <Tapped>
                <Set rootNav.Active="ticketList"/>
            </Tapped>
    </ArtistItem>
</Each>

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

ArtistItem is the one whose background want to cycle.

Any ideas?

2

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.

3

Hi!

If you Observable.map 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">
    <Panel>
        <JavaScript>
            var Observable = require("FuseJS/Observable");

            var items = Observable("item1", "item2", "item3",
                                   "item4","item5","item6","item7",
                                   "item8","item9","item10");

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

            module.exports = {
                viewItems: viewItems
            };
        </JavaScript>
        <ScrollView>
            <StackPanel>
                <Each Items="{viewItems}">
                    <Rectangle Fill="{color}" Height="60">
                        <Text Value="{text}" />
                    </Rectangle>
                </Each>
            </StackPanel>
        </ScrollView>
    </Panel>
</App>

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

4

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