Is there a ListView equivalent? Rendering large data sets efficiently.

General
1

An example use case would be rendering something similar to a contact list, or ingredient list with 100+ items. Is there a way to render only the items on screen and recycle the containers like ListView from android or react-native. This should be more memory efficient.

ListView example https://www.youtube.com/watch?v=-VPM6ICgCk8

Perhaps this can be done using fancy JS observable logic inside a scrollview?

2

I believe Fuse does that for you already (Hopefully somone corrects me about how this works internally if I’m wrong).

Start out with your usecase and it’ll be much easier to help you. But yes using a ScrollView is how you would make this scrollable list. Here’s a simple text example:

<App>
    <ScrollView>
        <StackPanel>
            <Each Count="100">
                <Text Value="Dummy Text" />
            </Each>
        </StackPanel>
    </ScrollView>
</App>

The above would give you a scrollable list of a bunch of Stacked text.

Now when you’re dealing with actual data, you’ll want to use some javascript using Observables and the Item property on Each

<App>
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var list = Observable('1', '2', '3');

        module.exports = {
            list: list
        }
    </JavaScript>
    <ScrollView>
        <StackPanel>
            <Each Items="{list}">
                <Text Value="{}" />
            </Each>
        </StackPanel>
    </ScrollView>
</App>

You use an empty {} when its a simple primitive value 1, and when its an object { text: '1' } you would use the property name of that object {text}

<App>
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var list = Observable('1', '2', '3');

        module.exports = {
            list: list.map(function(num) {
                return { number: num };
            })
        }
    </JavaScript>
    <ScrollView>
        <StackPanel>
            <Each Items="{list}">
                <Text Value="{number}" />
            </Each>
        </StackPanel>
    </ScrollView>
</App>
3

Hi there
I am still interested to know if Edwin’s assumption is correct because I have the same requirement as well

4

Hi all,

this has been discussed before in other forum threads, and there’s even a working example.

Note that this particular example does not include three more things that would make it 100% complete, but let’s leave that for you to figure it out.

The three things are: Deferred, WhileBusy and Scrolled.check().