Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Listening to click event on ListView

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?

like image 882
dougajmcdonald Avatar asked Sep 27 '12 20:09

dougajmcdonald


People also ask

How can you react to click events on an item of a ListView?

Place an empty linearlayout below the listview by setting an appropriate height to the listview. Place an onClick() method to that linear layout. That must do it.

How to handle click event in ListView in android?

This example demonstrates how do I handle the click event in ListView in android. Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml.


2 Answers

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.

like image 198
Jeremy Foster Avatar answered Sep 28 '22 07:09

Jeremy Foster


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);
like image 42
dougajmcdonald Avatar answered Sep 28 '22 06:09

dougajmcdonald