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