Dinamically add TextInput

How-to Discussions
1

The following code simulates fetching some data from a dB and it populates four TextInput named serial, type, brand and model.

But suppose that I don’t know the names, nor the number of the dB fields until I query the dB. How can I “dynamically” create the TextInputs? And how can I give each of them a name (according to the fetched data) and make each of them Observable? As I did myself the API I can change it’s output as needed.

<App Background="#eee">
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var datas = Observable();
        
        // This represents some data fetched from a dB via API
        json = {
           "items": [
                {
                    "serial": "201850003555",
                    "type": "desktop",
                    "brand": "Yashi",
                    "model": "Integra"
                }
            ]
        };


        datas.replaceAll(json.items);

        module.exports = {
            datas: datas
        };


    </JavaScript>

    <StackPanel ItemSpacing="3" Margin="3" Background="#eee">
        <Each Items="{datas}">
            <MyTextInput Value="{serial}" />
            <MyTextInput Value="{type}" />
            <MyTextInput Value="{brand}" />
            <MyTextInput Value="{model}" />
        </Each>
    </StackPanel>


    <!-- ========================================================================== -->
    <Panel ux:Class="MyButton" HitTestMode="LocalBounds" Color="#25a" >
        <string ux:Property="Text" />
        <Text Value="{ReadProperty Text}" Color="#fff" Alignment="Center" Margin="30,15,30,15" />
        <WhilePressed>
            <Change this.Color="#138" Duration="0.05" DurationBack=".2" />
        </WhilePressed>
    </Panel>

    <TextInput ux:Class="MyTextInput" FontSize="20" PlaceholderColor="#ccc" Padding="5" Height="32">
        <Rectangle Layer="Background" CornerRadius="3">
            <Stroke Width="1" Color="#CCCCCC" />
            <SolidColor Color="White" />
        </Rectangle>
    </TextInput>
</App>