Listening to click event on ListView

Question

Feels like I'm missing something stupid here, but what's the recommended method to listen to the click event on a listview?

At the moment I've got:

WinJS.Utilities.query(".menuHolder").listen("click", linkClickHandler, false);

And my listview template uses the class 'menuHolder' for it's items:

            <div id="menuTemplate"
            data-win-control="WinJS.Binding.Template">
            <div class="menuHolder">
                <!-- menu img -->
                <img src="#" data-win-bind="src : pic; alt : title" />

                <div class="menuText">
                    <!-- menu text -->
                    <h1 data-win-bind="innerText : title"></h1>
                    <!-- menu desc -->
                    <h4 data-win-bind="innerText : description"></h4>
                </div>
            </div>
        </div>

I don't seem to hit my breakpoint, in my link handler, or invoke it's function. Any thoughts?

EDIT:

As a follow on question (bearing in mind the item invoked event) is anyone aware of the recommended approach to pass data between a listview and the iteminvoked event, if I say wanted to use the WinJS.Navigator class to move around an application? I'm guessing I need to cast some part of the eventInfo into a suitable object and retrieve information, what part?

Virtuous

Answer 1

Assuming the data you want to "pass" is the data that is bound to the item that was invoked, you can do that in the event arguments that are passed in to the iteminvoked event. One of mine looks like this...

demosLV.oniteminvoked = function(e) {
    e.detail.itemPromise.then(function(item) {
        var location = format("/pages/{0}/{0}.html", item.data.key);
        WinJS.Navigation.navigate(location, item.data);
    });
};

So the demosLV is the ListView. I'm setting the oniteminvoked to a function. That function receives "e" as the event args. In the function I access e.detail.itemPromise and hang a .then off of it. Then I access the actual data in the .then using item.data. Hope that's what you meant. BTW, the format function is one of mine in case you're wondering why it doesn't work for you.

Riendeau

Ah brilliant, it was the detail.itemPromise side of things I was missing, previously had just used href property from hyperlinks, so wasn't sure how to get at the data. Thanks. – Virtuous

Answer 2

Seems I was being a sausage, I needed to listen for the 'iteminvoked' event on the parent listview id reference, not the child level.

WinJS.Utilities.query("#menu").listen("iteminvoked", linkClickHandler, false);

Virtuous