Why does Each render items in reverse?

Bug Reports
1

EDIT: This code example works, the one in my second post renders in reverse.

Fuse 0.24.0 (build 7243)

<JavaScript>
    var Observable = require("FuseJS/Observable")
    exports.listData = Observable(
        {year_nr: 2015},
        {year_nr: 2016},
        {year_nr: 2017}
    )
</JavaScript>

<StackPanel Color="#fff" ItemSpacing="1">
          
    <Each Items="{listData}">

        <Panel>
            <Text Color="#111" Value="{year_nr}" Alignment="CenterLeft"  Margin="10,5,10,0" />
        </Panel>
    </Each>
</StackPanel>

EDIT: Changed color of text, and lost the code formatting in the post unfortunately ;D

2

I’m on the same version and it shows it in order, btw change the color of the text so we can actually see it

3

Here is an example of the actual issue. The bug appears when you update an Observable that is empty:

<Page ux:Name="eventList" Background="#000">
    <JavaScript>
        var Observable = require("FuseJS/Observable")
        exports.listData = Observable()

        for (var i = 2015; i < 2100; i++) {
            exports.listData.add({year_nr: i, type: 'year'})
        }

        exports.listData.forEach(function (item) {
            console.log(JSON.stringify(item))
        })

    </JavaScript>

    <ScrollView>
        <StackPanel Color="#fff" ItemSpacing="1">
                
            <Each Items="{listData}">

                <Match Value="{type}">
                    <Case String="year">

                        <Panel>
                            <Text Color="#111" Value="{year_nr}" Alignment="CenterLeft"  Margin="10,5,10,0" />
                        </Panel>

                    </Case>
                </Match>

            </Each>

        </StackPanel>
    </ScrollView>
</Page>
4

Hi!

Thanks for reporting this bug! We have identified the bug and are working on a fix :slight_smile:

5

This issue is fixed in 0.25 when enclosing list items in Deferred but appears to still be an issue when doing plain rendering.

6

I believe the issue is triggered by having Match directly inside of Each, so you can basically work around it by wrapping the Match inside a Panel. (Or some other class, like the Deferred you used).

The fix Vegard mentioned is not in 0.25 but will be included in a later release.

7

Setting <Each MatchKey="type"> (for this example) and thus getting rid of the Match did the trick for me.
Cleaner code too :wink:

https://www.fusetools.com/docs/fuse/visual/templates