Is it possible to get the context of a tapped item in a listview? For example if I have a list of three items how can I tell that it was the second item clicked and get the data from the object that relates to that item in the observable array?

EX: Here is my list template, if the user tapped the second connection in the list of connections, how could I get the data associated with that connection based off the clicked items index?

  <ListView items="{{ connections }}"  loaded="" itemLoading="" itemTap="">
      <ListView.itemTemplate>
          <StackLayout class='connection-li'>
                <GridLayout class="connection-info" rows="" columns="auto, *, *" tap="goToMeasurements">
                    <Image col="0" src="res://ic_person_black_36dp" stretch ="none" />                        
                    <Label col="1" class="connection-name" text="{{ PatientFirstName + ' ' + PatientLastName }}" textWrap="false" />
                    <Image col="2" verticalAlignment="middle" horizontalAlignment="right" src="res://ic_cancel_black_18dp" stretch ="none" />                        
                </GridLayout>                                                       
          </StackLayout>
      </ListView.itemTemplate>
  </ListView>

EDIT: Based off the docs I found the following event that I can hook into to get the index data, but where it references ListView how can I make that a specific reference to the one I'm interested in, can I give it a class and access it that way?

listView.on(listViewModule.ListView.itemTapEvent, function (args: listViewModule.ItemEventData) {
    var tappedItemIndex = args.index;
    var tappedItemView = args.view;
    //// Do someting
});

Is it possible to get the context of a tapped item in a listview? For example if I have a list of three items how can I tell that it was the second item clicked and get the data from the object that relates to that item in the observable array?

EX: Here is my list template, if the user tapped the second connection in the list of connections, how could I get the data associated with that connection based off the clicked items index?

  <ListView items="{{ connections }}"  loaded="" itemLoading="" itemTap="">
      <ListView.itemTemplate>
          <StackLayout class='connection-li'>
                <GridLayout class="connection-info" rows="" columns="auto, *, *" tap="goToMeasurements">
                    <Image col="0" src="res://ic_person_black_36dp" stretch ="none" />                        
                    <Label col="1" class="connection-name" text="{{ PatientFirstName + ' ' + PatientLastName }}" textWrap="false" />
                    <Image col="2" verticalAlignment="middle" horizontalAlignment="right" src="res://ic_cancel_black_18dp" stretch ="none" />                        
                </GridLayout>                                                       
          </StackLayout>
      </ListView.itemTemplate>
  </ListView>

EDIT: Based off the docs I found the following event that I can hook into to get the index data, but where it references ListView how can I make that a specific reference to the one I'm interested in, can I give it a class and access it that way?

listView.on(listViewModule.ListView.itemTapEvent, function (args: listViewModule.ItemEventData) {
    var tappedItemIndex = args.index;
    var tappedItemView = args.view;
    //// Do someting
});

• javascript
• nativescript

2 Answers 2

You don't need a separate class, just have a javascript file that corresponds to this page (i.e. main-page.xml and main-page.js). Then, you can wire up the event in that itemTap attribute:

<ListView items="{{ connections }}" itemTap="onConnectionTapped">

Then export that event from your corresponding javascript file, and you can access the data object for the item a couple different ways:

export function onConnectionTapped(args) {
    var tappedView = args.view,
        //the View will have a bindingContext 
        // set to the individual item from the list
        tappedItem = tappedView.bindingContext;

    //or, if you need the entire list as well, 
    // get it from the Page's bindingContext
    // as each View has a ref to the Page it's on
    var pageBindingContext = tappedView.page.bindingContext,
        fullItemsList = pageBindingContext.connections,
        itemForTap = fullItemsList[args.index];
}

In the goToMeasurements handler args.object will be GridLayout. Its .bindingContext property will the a data item from your connections array. connections.indexOf(dataItem) will return the index of this data item if you need its index.