Working with List

How-to Discussions
1

I have this side project I am trying to play with

But I am having a problem removing an item from the list.

here is my UX

<App Theme="Basic" Background="#630B63">
    <JavaScript File="JS/app.js" />
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <DockPanel>
            <Panel>
                <LinearNavigation ux:Name="_appNav" Easing="CircularInOut" Duration="0.5" />
                <Page ux:Class="AppPage">
                    <EnteringAnimation>
                        <Move X="-1" Duration="-0.5" />
                    </EnteringAnimation>
                    <ExitingAnimation>
                        <Move X="1" Duration="0.5" />
                    </ExitingAnimation>
                </Page>
                <Rectangle ux:Class="Save" Fill="#D7440D" CornerRadius="0" />


                <AppPage>
                    <StackPanel Alignment="Top" Background="#7B8395">
                        <Text Value="JustSaying" TextColor="#F6ED46" FontSize="40" Alignment="Center" />
                    </StackPanel>
                    <StackPanel Alignment="Bottom">
                        <Grid ColumnCount="2" Background="#E6E6E6" Alignment="Bottom">

                            <TextInput Margin="0, 10, -90, 0" PlaceholderColor="#9C9C9C" PlaceholderText="Enter text here" Opacity="1" Background="#E6E6E6" Value="{item_entered}" />
                            <Save Margin="100,0,0,0" Clicked="{add_to_list}">
                                <Text Value="+" Alignment="Center" FontSize="40"/>
                            </Save>
                            <WhileKeyboardVisible>
                                    <Move Y="-1" RelativeTo="Keyboard" />
                            </WhileKeyboardVisible>

                        </Grid>
                    </StackPanel>
                    <ScrollView Height="500">

                        <StackPanel Margin="10,-10,0,80" Alignment="Top">
                            <Text Value="{def_value}" Alignment="Center" TextColor="#FFFFFF"  Margin="0,9,0,0"/>
                            <Each Items="{market_list}">
                                <Grid ColumnCount="2" Margin="-95,0,0,0" Alignment="Top">

                                    <Rectangle Fill="{white}" Width="40" Height="40" Margin="5, 15, -5, 20" CornerRadius="50,50,0,50" Clicked="{ddd}">
                                        <Text Value="{remove}" FontSize="18" TextAlignment="Center" Margin="0, 10, 0, 0" />
                                    </Rectangle>

                                    <Rectangle Fill="{yellow}" Margin="-80, 10, 100, 15" Height="45" CornerRadius="50, 50, 50, 0">
                                        <Text Value="{list}" TextWrapping="Wrap" FontSize="20" Margin="4,10,0,0" />
                                    </Rectangle>

                                </Grid>
                            </Each>
                            <!-- <Text Value="{note_content}" /> -->
                        </StackPanel>
                    </ScrollView>

                </AppPage>
            </Panel>
        </DockPanel>
    </DockPanel>
</App>

<!-- <Text Value="I am here" FontSize="30"/>
"Orientations": "Portrait",
 -->

Here is my JS file

 /*
Copywrite Chizom Echehieuka
*/

// all variables are declered here
var Observable = require("FuseJS/Observable");
var def_value = Observable("Market list is empty");
var market_list = Observable({list: "",white: "#630B63", yellow: "#630B63",remove: "",indexes:0});
market_list.clear();
var item_entered = Observable();
// var ddd = Observable();

function add_to_list(){
    // body... for adding item
    if (item_entered.value){
        def_value.value = "";
        market_list.add({list: item_entered.value, white: "#FF5059",yellow: "#FC6",remove: "-"});
        item_entered.value = "";
            }
    else{
        def_value.value = "";
        def_value.value = "You cant post empty values";
        return def_value;
    }
};

function ddd() {
    // body... for deleting item
    market_list.removeAt();


}



module.exports = {
    def_value : def_value,
    market_list : market_list,
    item_entered: item_entered,
    add_to_list : add_to_list,
    ddd: ddd,
};

I want the button that stays beside every list item I create to be able to remove an item it is related to in the view.

2

try this:

function ddd(args) {
   market_list.remove(args.data);
}