Problem Observable.refreshAll

Bug Reports
1

Hello! Element with id = 1 is not updated

<Panel>
    
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        var items = Observable(
            {id: 1, text: "one" },
            {id: 2, text: "two" },
            {id: 3, text: "tres" }
        );

        setTimeout(function(){

            var newItems = [
                {id: 1, text: "three" },
                {id: 4, text: "four" },
                {id: 5, text: "five" }
            ];

            items.refreshAll(newItems,
                //Compare on ID
                function(oldItem, newItem){
                    return oldItem.id == newItem.id;
                },
                // Update text
                function(oldItem, newItem){
                    oldItem.text.value = newItem.text;
                },
                // Map to object with an observable version of text
                function(newItem){
                    return {
                        id: newItem.id,
                        text: Observable(newItem.text)
                    };
                }
            );
        }, 2000);

        module.exports.items = items;
    </JavaScript>

    <ScrollView>
        <StackPanel>
            <Each Items="{items}" >
                <StackPanel Color="#FFF" Margin="10" Padding="10">
                    <Shadow Distance="3" />
                    <Text FontSize="25" Value="{text}" />
                </StackPanel>
            </Each>
        </StackPanel>
    </ScrollView>
</Panel>
2

That’s because initially you haven’t set the first items’ .text property as an Observable. This fixes it for me:

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

        var items = Observable(
            {id: 1, text: Observable("one") },
            {id: 2, text: Observable("two") },
            {id: 3, text: Observable("tres") }
        );

        setTimeout(function(){

            var newItems = [
                {id: 1, text: "three" },
                {id: 4, text: "four" },
                {id: 5, text: "five" }
            ];

            items.refreshAll(newItems,
                //Compare on ID
                function(oldItem, newItem){
                    return oldItem.id == newItem.id;
                },
                // Update text
                function(oldItem, newItem){
                    oldItem.text.value = newItem.text;
                },
                // Map to object with an observable version of text
                function(newItem){
                    return {
                        id: newItem.id,
                        text: Observable(newItem.text)
                    };
                }
            );
        }, 2000);

        module.exports.items = items;
    </JavaScript>

    <ScrollView>
        <StackPanel>
            <Each Items="{items}" >
                <StackPanel Color="#FFF" Margin="10" Padding="10">
                    <Shadow Distance="3" />
                    <Text FontSize="25" Value="{text}" />
                </StackPanel>
            </Each>
        </StackPanel>
    </ScrollView>

</App>
3

Yes, everything works. I overlooked. Excuse me. I took the source code from the page https://www.fusetools.com/docs/fusejs/observable-api. Only changed the parameter “id”