Observable updating, but doesn't update the UX in <Each>

General
1

you can see the values changes in the console, but the UX doesn’t

<App>
    <JavaScript>

    function Dump(object){
    var str = lookdeep(object).join(',\n');
    //return str;
    console.log("~~~ start Dump ~~~");
    console.log(str);
    console.log("~~~ end Dump ~~~");
    };

    function lookdeep(object) {
    var collection = [],
        index = 0,
        next, item;
    for (item in object) {
        if (object.hasOwnProperty(item)) {
            next = object[item];
            if (typeof next == 'object' && next != null) {
                collection[index++] = item +
                    ' { ' + lookdeep(next).join('\n') + '\n  } ';
            } else collection[index++] = ['\n    ' + item + ':' + String(next)];
        }
    }

    return collection;
    };

    var Observable = require('FuseJS/Observable');
    
    var bars = Observable(
        {pos: 0.30, level: 0.1, bar: 10},
        {pos: 0.50, level: 0.1, bar: 20},
        {pos: 0.70, level: 0.1, bar: 30},
        {pos: 0.90, level: 0.1, bar: 40},
        {pos: 1.10, level: 0.1, bar: 30}
    
    );
  
   
    
    function getRandom() {
        var min = 0;
        var max = 100;
        var myRND =  Math.floor(Math.random() * (max - min + 1)) + min;
        return myRND;
    }
    setInterval(function() {
        bars.forEach(function(b,index) {
            //debug_log("index = " + index );
            b.bar = getRandom();
            b.level = b.bar/100;

          // debug_log("index = " + index + " | b.bar = " + b.bar + " | b.level = " + b.level+ " | b.pos = " +  b.pos);
           
        });
        bars._values[4].bar = 200;
        Dump(bars);
        
        
    }, 1200);
    
    module.exports = {
        bars: bars,
       
    }

    
    </JavaScript>
    <StackPanel>
      <Text Value="{bars.bar}"  />
      <Text Value="{bars.level}" />
      <Text Value="{bars.pos}" />
    </StackPanel>
    <Rectangle ux:Class="MyRectangle" Width="24" Color="Blue" CornerRadius="3,3,0,0" StrokeWidth="1" StrokeColor="#2af">
        <LayoutAnimation>
            <Resize RelativeTo="SizeChange" Duration="1" Vector="1" />
            <Move RelativeTo="PositionChange" Duration="1" Vector="1" />
        </LayoutAnimation>
    <LinearGradient>
        <GradientStop Offset="0" Color="#cf0" />
        <GradientStop Offset="1" Color="#f40" />
    </LinearGradient>
    </Rectangle>
    
    <StackPanel ItemSpacing="80" ContentAlignment="Center" >

        <Panel Color="#c9e8b4" Height="128" Alignment="Center" Padding="16">


            <StackPanel Orientation="Vertical" ItemSpacing="2" Alignment="HorizontalCenter">
                <Each Items="{bars}">
                    <!--MyRectangle Height="{bar}" Alignment="Bottom"  /-->
                    <Text Value="{bar}" />
                </Each>
            </StackPanel>
            
        </Panel>

    </StackPanel>
</App>
2

Try this:

var bars = [
        {pos: Observable(0.30), level: Observable(0.1), bar: Observable(10)},
        {pos: Observable(0.50), level: Observable(0.1), bar: Observable(20)},
        {pos: Observable(0.70), level: Observable(0.1), bar: Observable(30)},
        {pos: Observable(0.90), level: Observable(0.1), bar: Observable(40)},
        {pos: Observable(1.10), level: Observable(0.1), bar: Observable(30)}
    ];

and change values like this:

bars[0].level.value = 0.3;
bars[0].bar.value = 80;
3

ok, but what is wrong with the way I did it?
the are many examples in the docs that uses that
Observable of Objects / json

  var bars = Observable(
        {pos: 0.30, level: 0.1, bar: 10},
        {pos: 0.50, level: 0.1, bar: 20},
        {pos: 0.70, level: 0.1, bar: 30},
        {pos: 0.90, level: 0.1, bar: 40},
        {pos: 1.10, level: 0.1, bar: 30}
    );

vs. array of Observables

var bars = [
        {pos: Observable(0.30), level: Observable(0.1), bar: Observable(10)},
        {pos: Observable(0.50), level: Observable(0.1), bar: Observable(20)},
        {pos: Observable(0.70), level: Observable(0.1), bar: Observable(30)},
        {pos: Observable(0.90), level: Observable(0.1), bar: Observable(40)},
        {pos: Observable(1.10), level: Observable(0.1), bar: Observable(30)}
    ];
4

Can you give me a link to examples you’re talking about?

5

https://www.fusetools.com/examples/navigation-animation

https://www.fusetools.com/docs/fusejs/observable-api#any-filter
https://www.fusetools.com/docs/fusejs/observable-api#removewhere-func
https://www.fusetools.com/examples/inbox with functions

6

I’m not sure, but I understand it the following way. When you make the whole collection as observable, UI update will be triggered when you add/remove items to/from collection.

But if you want to change particular values, those values should be declared as observables.