Click a listview item and my next page know which one was clicked

Question

Hi,

I have a listview setup and I want to have the user sent to a different html page after they click an item.  No matter which item they click I want them to go to the same .html file, but I want the file to know which item was clicked so it knows what data to show on the screen.  For example. I have a listview with 2 sports teams. If I click one of them I want a page to pop up that shows the players on the team, but I don't want to have to build two separate .html files, one for each team, I just want the page to know which one I clicked and grab the appropriate data.  Right now all I know is to do: 

if (invokedItem.index == 0) {
     WinJS.Navigation.navigate("/pages/sportsTeam/teamA.html");
}

this would require two different .html files, teamA.html and teamB.html.  I want to do something like:

if (invokedItem.index == 0) {
     WinJS.Navigation.navigate("/pages/sportsTeam/teamA.html");
     //a function in teamA.js that can accept the index
     team(invokedItem.index);
}

Thanks!

Answer 1

You can get the data item using the index and then pass it to the other screen . In the other HTM you can get that from the options.

This is a sample in the default grid application project (New project --> Grid application).

1.See the "groupDetail.js" (_iteminvoked method) for how to send a item while navigating.

2. See the "itemDetail.js (ready method) for how to accept the sent item/data

 

 

For example in your main page where list is there on the item invoked method :

_itemInvoked: function (args) {
//_items : the datasource for the list view
            var item = this._items.getAt(args.detail.itemIndex); // Get the item
            WinJS.Navigation.navigate("/pages/Team.html", { itemselected: item }); // pass the item to team page
        }

In the team.js (team.html page definition JS) you can get the item by :

WinJS.UI.Pages.define("/pages/Team.html", {
        ready: function (element, options) {
            var item = options.itemselected;   // Get the item that was passed from the caller     
....
}

Hope this helps.

- Girija

Answer 2

That example and the resource you gave helped a lot thanks :)