How to Add Clicked function to Array generated links

How-to Discussions
1

I declared my navigation links with an array and used the Each function to loop it into the EdgeNavigator like this

     var Links = [
      {name: "Sermon"},
      {name: "News/Event"},
      {name: "Quotes"},
      {name: "Send Testimony"},
      {name: "About ALGC"},
      {name: "Exit"}
       ];

       module.exports = {
         Links: Links
       }

Here is the ux Each loop

        <ScrollView>
          <StackPanel>
            <Each Items="{Links}">
           <Separator/>
         <Panel HitTestMode="LocalBoundsAndChildren" >
            <algc.Text Clicked='{gotoPage}' FontSize="10" Value="{name}" Margin="8"  </algc.Text>
                <WhilePressed>
                <Scale Factor=".95" Duration=".08" Easing="QuadraticOut"/>
            </WhilePressed>
          </Panel>
         </Each>
        </StackPanel>
     </ScrollView>

How do I create a function that would take each link to its page under the Each loop because I have been using this but it didn’t work

   function gotoPage(arg)
     {
    var page = arg.data;
    router.goto(page);
    }

Thanks as you help.

2

Hi omolewastephen,

you could do this in UX:

<Each Items="{Links}">
	<Panel HitTestMode="LocalBounds" Clicked="{gotoPage}">
		<algc.Text FontSize="10" Value="{name}" Margin="8" />
		<WhilePressed>
			<Scale Factor=".95" Duration=".08" Easing="QuadraticOut" />
		</WhilePressed>
	</Panel>
</Each>

and then in JS:

function gotoPage(arg) {
	console.log("this is arg: " + JSON.stringify(arg));
	var page = arg.data.name;
	router.goto(page, {});
}

Hope this helps!