Sort Observable variables

How-to Discussions
1

Hi,

I have an Observable MyObservable that have many of this inside:

function Object(Text, Number) {
    this.O1 = O1;
    this.O2 = O2;
}

Then I display this on my app like:

<Each Items="{MyObservable}">
    <Text Value="{Text}" />
</Each>

Its posible to sort the elements inside MyObservable by the Number value?

2

Try something like this:

<App Theme="Basic">
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        function Number(text, number) {
            this.text = text;
            this.number = number;
        }
        var numbers = Observable();

        var sortedNumbers = Observable(function () {
            var array = numbers.toArray();
            array.sort(function (a, b) {
                return a.number - b.number;
            });
            var sorted = Observable();
            sorted.replaceAll(array);
            return sorted;
        }).inner();

        numbers.add(new Number('nine', 9));
        numbers.add(new Number('1337', 1337));
        numbers.add(new Number('one', 1));
        numbers.add(new Number('seven', 7));
        numbers.add(new Number('two', 2));

        module.exports = {
            sortedNumbers : sortedNumbers
        }

    </JavaScript>
    <ScrollView>
        <StackPanel>
            <Each Items="{sortedNumbers}">
                <Text Value="{text}" />
            </Each>
        </StackPanel>
    </ScrollView>
</App>

It returns a list:

one
two
seven
nine
1337

It is obviously(?) not the most efficient implementation as any addition to numbers will completely recreate sortedNumbers, but it seems to work. It might be possible to rewrite this to use refreshAll, but I’m not familiar with it. JavaScript and/or Fuse-ninjas, please contribute to make this example better.