get item details from item clicked

How-to Discussions
1

Hi,

Does someone has an idea why i can’t get item details from clicked element ?

<App Theme="Basic">

    <JavaScript>
    var Observable  = require("FuseJS/Observable");
    var data = Observable();
    var currentPage = Observable("NEWS");
    var id = Observable('');

    fetch('https://fuseweb.azureedge.net/forum-user-uploads/2016/08/22/DVV7uzfT6goP-legacy-files-P6FteBeij9A7jTXL-edgenavresponse.json&#39;)
    .then(function(response) { return response.json(); })
    .then(function(responseObject) { data.value = responseObject; });

    getId = function(e){
        id.value = e.data.body;
        console.log('test')
    }

    module.exports = {
        data: data,
        currentPage : currentPage,
        id : id
    };

    </JavaScript>
    <ClientPanel>
        <!-- ################### SUBPAGE CLASS -->
        <Page ux:Class="subpage">
            <EnteringAnimation>
                <Move Y="1" RelativeTo="Size" Duration="0.2"/>
            </EnteringAnimation>
        </Page>

        <!-- ################### THE TOP BAR -->
        <StackPanel Dock="Top">
            <!-- This is the top ledge -->
            <ux:Include File="topbar.ux" />
            <Rectangle Height="1" Fill="#333c48" />
        </StackPanel>
        <Text ux:Class="Header" Margin="14,10,14,5" TextWrapping="Wrap" FontSize="22">
        </Text>
        <Text ux:Class="Article" Margin="14,0,14,0" TextWrapping="Wrap" FontSize="13">
        </Text>
        <PageControl>
            <Page>
                <Panel ux:Name="mainPage1">
                    <HierarchicalNavigation/>
                    <subpage ux:Name="liste" Color="#ffffff">
                        <ScrollView ClipToBounds="true">
                            <StackPanel Alignment="Top">
                                <Each Items="{data.responseData}" >

                                    <StackPanel  Clicked="{getId}" ux:Name="NewsItem" Margin="0,0,0,20">

                                        <!-- RENDERING -->
                                        <Image  Url="{imageUrl}" />
                                        <Header Value="{headline}" >

                                        </Header>

                                        <!--Article Value="{body}" ux:Name="PostContent" /-->
                                        <Clicked>
                                            <NavigateTo Target="details"/>
                                        </Clicked>

                                    </StackPanel>

                                </Each>
                            </StackPanel>
                        </ScrollView>
                    </subpage>

                    <!-- ############## SUBPAGE -->
                    <ux:Include File="DetailsPage.ux" />

                </Panel>
            </Page>

            <Page ux:Name="mainPage2" Color="#333"/>

        </PageControl>
    </ClientPanel>
</App>

When i click on the element (inside a loop) i call the getId function :

The element :

<Each Items="{data.responseData}" >
    <StackPanel  Clicked="{getId}" ux:Name="NewsItem" Margin="0,0,0,20">
        <!-- RENDERING -->
         <Image  Url="{imageUrl}" />
         <Header Value="{headline}" />
         <Clicked>
             <NavigateTo Target="details"/>
          </Clicked>
    </StackPanel>
</Each>

The function not binded from the element clicked


<JavaScript>
    var Observable  = require("FuseJS/Observable");
    var data = Observable();
    var currentPage = Observable("NEWS");
    var id = Observable('');

    fetch('https://fuseweb.azureedge.net/forum-user-uploads/2016/08/22/DVV7uzfT6goP-legacy-files-P6FteBeij9A7jTXL-edgenavresponse.json&#39;)
    .then(function(response) { return response.json(); })
    .then(function(responseObject) { data.value = responseObject; });

    getId = function(e){
        id.value = e.data.body;
        console.log(id.value)
    }

    module.exports = {
        data: data,
        currentPage : currentPage,
        id : id
    };

    </JavaScript>

Thanks

2

Try to look at what you get in e by doing

console.log(JSON.stringify(e));

Your code works well for me, except that you didn’t export getId.

3

Yes your are in right, just a question may be an idiot question but i want to know, why i should export getId? this is a function already binded by the clicked element and return the id.value (exported and observed) ?

4

getId is not available to the clicked element when it’s not exported. When you use it and not export it is not called. An empty function is called by Clicked.

5

Thank you for responses, how to mark resolved please?