Dynamic observer field access

How-to Discussions
1

Hi,

Is possible to access observer field dynamic like this;

<Each Items="{Data}">
   <Text Value="{{TextField}}" /> <!--   TextField may selected 'text' or 'val'   -->

</Each>

<JavaScript>
var Observable = require('FuseJS/Observable');
var Data=Observable({val:5,text:"icaros",id:1},{val:4,text:"misina",id:2},{val:3,text:"hallop",id:3});
var TextField=Observable("text");
var ValField=Observable("val");

module.exports={
Data:Data,
TextField:TextField,
ValField:ValField
};

</JavaScript>
2

Hi Hilmi!

The answer is “yes, absolutely!” Have you already read the docs on Observable conditions? By applying that concept, it’s relatively easy to make what you’re after.

I’ve given it a try here:

<App>
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var data = Observable();
        data.add(new CustomItem("icaros", 5));
        data.add(new CustomItem("misina", 4));
        data.add(new CustomItem("hallop", 3));

        function CustomItem(text, val) {
            this.id = data.length;
            this.text = text;
            this.val = val;
        }

        var field = Observable("text");

        var items = field.flatMap(function(x) {
            return data.map(function(ci) {
                return {"id": ci.id, "value": ci[x]};
            });
        });

        function toggleShowText() {
            field.value = "text";
        }

        function toggleShowVal() {
            field.value = "val";
        }

        module.exports = {
            items: items,
            toggleShowText: toggleShowText,
            toggleShowVal: toggleShowVal
        };
    </JavaScript>
    <DockPanel>
        <Grid Dock="Top" Height="56" ColumnCount="2" CellSpacing="8">
            <Panel Width="112" Height="40" Alignment="Right" Clicked="{toggleShowText}">
                <Text Value="show text" Color="White" Alignment="Center" />
                <Rectangle Color="#18f" CornerRadius="2" />
            </Panel>
            <Panel Width="112" Height="40" Alignment="Left" Clicked="{toggleShowVal}">
                <Text Value="show val" Color="White" Alignment="Center" />
                <Rectangle Color="#18f" CornerRadius="2" />
            </Panel>
        </Grid>
        <StackPanel Margin="8" ItemSpacing="8">
            <Each Items="{items}">
                <Text Value="{value}" />
            </Each>
        </StackPanel>
    </DockPanel>
</App>
3

Hi Uldis,

I like this, thank you :slight_smile:

Whoo hoo