How to pass/receive item detail from ListView tap event in Nativescript/JS? - nativescript

Question

What I want to do (I think) is get the store.id from itemTap event and pass it along with the .navigate() so I can use it to fetch the correct data for the detail page, however I can't figure out how to get the tapped item.
I've got a list-page.xml:
<Page loaded="loaded" xmlns:lv="nativescript-ui-listview">
<ActionBar title="Bars"></ActionBar>
<GridLayout>
<ListView items="{{ storeList }}" row="1" itemTap="showDetail">
<ListView.itemTemplate >
<GridLayout class="grocery-list-item" >
<Label class="p-15" text="{{ name }}" />
</GridLayout>
</ListView.itemTemplate>
</ListView>
</GridLayout>
and list-page.js:
var dialogsModule = require("tns-core-modules/ui/dialogs");
var observableModule = require("tns-core-modules/data/observable");
var ObservableArray = require("tns-core-modules/data/observable-array").ObservableArray;
var page;
var StoreListViewModel = require("../shared/view-models/store-list-view-model");
var frameModule = require("tns-core-modules/ui/frame");
var storeList = new StoreListViewModel([]);
var pageData = new observableModule.fromObject({
storeList:storeList
});
exports.loaded = function (args) {
page = args.object;
page.bindingContext = pageData;
sindex = args.object.bindingContext;
storeList.empty();
storeList.load();
};
exports.showDetail = function() {
frameModule.topmost().navigate("views/detail/detail-page");
};
The storeList comes from my api and successfully sends back a list of stores which are rendered by the listview.
I've looked at a dozen other tutorials/questions, and several seem to mention getting it from either the args.index or args.object.bindingContext, but when I console.log(args.index) from the showDetail function, it's undefined. console.log(args.object.bindingContext) gives me a bunch of data, but it's identical regardless which row I click....
CONSOLE LOG file:///app/bundle.js:359:12: {
"_observers": {
"propertyChange": [
{}
]
},
"_map": {
"storeList": {
"_observers": {
"change": [
{}
]
},
"_array": [
{
"name": "Hipster's Coffee",
"address": "2200 Broadway, Oakland, CA 94612",
"id": 2
},
{
"name": "Suzy's Stationary",
"address": "630 Divisadero St., San Francisco, CA 94117",
"id": 3
}
],
"_addArgs": {
"eventName": "change",
"object": "[Circular]",
"action": "add",
"index": 1,
"removed": [],
"addedCount": 1
},
"_deleteArgs": {
"eventName": "change",
"object": "[Circular]",
"action": "delete",
"index": null,
"removed": null,
"addedCount": 0
}
}
},
"storeList": "[Circular]"
}
I'm very new to NativeScript, so obviously I'm missing something simple here.

Answer 1

<ListView items="{{ storeList }}" row="1" itemTap="{{showDetail}}">
Look at the sample playground here.

Answer 2

The function showDetail needs to access the received arguments. Just change the following in your code-behind file:
exports.showDetail = function(args) {
console.log(args); // Now there are arguments received from the itemTap event
frameModule.topmost().navigate("views/detail/detail-page");
};

Answer 3

Eventually figured out the proper way to extract the item details from the args:
var item = args.view.bindingContext;
and then I could access item.name, item.id, etc. and pass it through like so:
var navigationOptions={
moduleName:'views/detail/detail-page',
context:{
store_id: item.id
}
}
frameModule.topmost().navigate(navigationOptions);