How to catch the click event of the button inside the WinJs ListView

Goal: Catch the click events of the button inside the WinJs listview using win-interactive class  and   WinJS.Utilities.markSupportedForProcessing. sometimes we may have requirement like having buttons or diffrent images in the Winjs Listview items.As we click on the listview item ,ItemInvoke  event is always getting called.so to call the individual button click event we need win-interactive class and WinJS.Utilities.markSupportedForProcessing

WinJS.Utilities.markSupportedForProcessing(func); Marks a function as being compatible with declarative

Following are the steps we need to do:

Step I:
Lets first add the like image in the Template.We need to add  the following code snipet in the HTML.

       
                                     
  

   
             
        
         
               
       
     
 

Step II:
Now lets  create our data source.

var userArray = [  { title: " James Brito", picture: "images/JamesBrito.png" },                
                 { title: "Alex", picture: "images/alex.png" },         { title: "Aleph", picture: "images/Aleph.png" },
{ title:"Richard",picture:"images/Richard.png" },                                
{ title:"John",picture:"images/john.png" },                                
{ title: "David", picture: "images/David.png" },
     { title:"Morkel",picture: "images/Morkel.png" },                              
   { title: "Sheldon", picture: "images/sheldon.png" },
     { title: "Joseph", picture: "images/Joseph.png" }
            ];
 
//Adding the Click event
for (var i = 0; i < userArray.length; i++)
  {
      userArray[i].LikeClick= WinJS.Utilities.markSupportedForProcessing(function (e) {
      UserLike(e);   
                  })        
            }
  var userList = new WinJS.Binding.List(userArray);
   if (document.getElementById("UserListView"))        document.getElementById("UserListView").winControl.itemDataSource = userList.dataSource;
 
//Click event of the Like button
function UserLike(eventobj)
{
  document.getElementById("like").style.display = "none";    
}

In this way we can catch the individual click event of the button present inside the WinJs.ListView item

150 150 Burnignorance | Where Minds Meet And Sparks Fly!