Question

I am trying to create a simple HTML Metro App for Windows 8. I want to display a list view, and based on the clicked item display different content on the screen. It sounds trivial, right?
But it doesn’t work! Here is my code:

<div  id="frameListViewTemplate"  data-win-control="WinJS.Binding.Template">
   <img data-win-bind="src: picture" class="thumbnail" />
</div>
<div id="basicListView" data-win-control="WinJS.UI.ListView" 
    data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#frameListViewTemplate'),onselectionchanged : handler}">
</div>

Than in the defult.js

var myListView = document.getElementById("basicListView").winControl;
myListView.addEventListener("selectionchanged", handler);

And the handler:

function handler() {
console.log("Inside the handler  : ");
}
handler.supportedForProcessing = true;

So the handler is never called. My questions are: How can I add an event listener and its handler to the listview control.
How can I recognize which element on the list view was clicked.

P.S.
The listview is displayed properly in my app.
Thank you for help,
J

Answer 1

To get the item that is “clicked”, you need to use itemInvoked. Selection changed would happen when the user cross slides on the item to select it, rather than taping/clicking to “invoke” it.

http://msdn.microsoft.com/en-us/library/windows/apps/br211827.aspx has some basic details.