CODEWITHSUNDEEP
javascripthtmlwindows-8winjs
RadiantHex
RadiantHex

Reputation: 25577

Add event listeners to buttons within a ListView - WinJS

I have a list of items within a ListView which contain buttons. I can't find a way to add event listeners to the buttons...

This is the code:

JS:

downloadsListView = document.getElementById('downloads').winControl
downloadsListView.itemDataSource = JobList.dataSource
downloadsListView.onloadingstatechanged = function() {
      var _this = this;
      return WinJS.Utilities.query("button.play_pause_button", document.getElementById('downloads')).forEach(function(element) {
        console.log(element);
        return element.onclick = _this._play_pause_download;
      });
    };

I can assure that the function does loop over the buttons via the console output. But clicking on the buttons fires nothing.

I hope someone can help. Thanks :)

Upvotes: 3

Views: 2149

Answers (2)

Jeremy Foster
Jeremy Foster

Reputation: 4773

I think Dominic's comment is your best bet. The ListView.itemTemplate property page on MSDN says...

Adding interactive elements to an item template The item template can contain most other controls, but it can't contain a FlipView or another ListView.

Normally, when the user interacts with an element, the ListView captures that interaction and uses it to determine whether the user selected or invoked an item or is panning through items. For an interactive element, such as a control, to receive input, you must attach the win-interactive class to the interactive element or one of its parent elements. That element and its children receive the interaction and no longer trigger events for the ListView.

When you attach the win-interactive to an element in a item template, be sure that the element doesn't fill the entire item, otherwise the user won't have a way to select or invoke that item.

To add interactive elements to your item template, you must use a templating function instead of a WinJS.Binding.Template.

Upvotes: 3

danielrozo
danielrozo

Reputation: 1442

Why don't just add an event listener to the ListViewItem, that fires when the user taps/clicks on the element? This is the proper way of doing it.

ListView has onItemInvoked. Mor info on that can be found here.

Example in your case:

 <div id="downloads" data-win-control="WinJS.UI.ListView" 
data-win-options="{oniteminvoked : _play_pause_download}">
</div>

Upvotes: 2

Related Questions