ListView doesn't fire selectionchanged

Question

My HTML:

<div id="listViewBoxOffice" 
     data-win-control="WinJS.UI.ListView"  
     data-win-options="{ itemTemplate: select('#movieThumbnailTpl'), selectionMode: 'single' }">
</div>

My Javascript:

WinJS.UI.Pages.define("/pages/home/home.html", {
    // This function is called whenever a user navigates to this page. It
    // populates the page elements with the app's data.
    ready: function (element, options) {
        api.getBoxOffice().done(this.boxOffice, this.errBoxOffice);

        listViewBoxOffice.winControl.addEventListener('selectionchanging', this.selectionchanging);
        listViewBoxOffice.winControl.addEventListener('selectionchanged', this.selectionchanged);

    },
    boxOffice: function (movies) {
        var list = new WinJS.Binding.List(movies);
        listViewBoxOffice.winControl.itemDataSource = list.dataSource;
    },
    errBoxOffice: function (err) {
        debugger;
    },
    selectionchanged: function (evt) {
        console.log('changed');
    },
    selectionchanging: function (evt) {
        console.log('changing');
    }
});

My problem:

The event selectionchanged is never fired. The event selectionchanging is fired but with bad value in newSelection.

Answer 1

While the documentation isn't as clear about this as I think it should be, you'll need to set the tapBehavior property to "toggleSelect" so that an item is fully selected. By default, the behavior is invokeOnly and with that it doesn't fully select the item. It clicks, but isn't selected.

There's a decent example located in the MSDN documentation.

If you store off a copy of the listViewBoxOffice instance, then from the events, you can get the current list via a promise:

listViewBoxOffice.selection.getItems().done(function(items) {
    // do something with the items...
});