WinJS: Flyout attached to clicked ListView item

Question

How can I attach a WinJS Flyout to the invoked item in a ListView? I have tried using both the invokedItem from the list below, which throws a "Object doesn't support property or method 'getBoundingClientRect'" as well as the item returned via (using the example names below): App_Windows.Data.listdata.getAt(invokedItem.index); which has the same issue.

I think I'm missing how to go from the item in the datasource of the list to the element on the html 'page' of the application.

Listview HTML

<div id="theListView"
     data-win-control="WinJS.UI.ListView"
     data-win-options="{
        itemTemplate: select('#twoTextValueListViewTemplate'),
        itemDataSource: App_Windows.Data.listdata
     }">
</div>

Flyout HTML

<div id="listItemFlyout" data-win-control="WinJS.UI.Flyout">
    <button id="listItemFlyoutButton">Do Things!</button>
</div>

JS

document.getElementById("theListView").addEventListener("iteminvoked", function (e) {
    e.detail.itemPromise.then(function (invokedItem) {
        var listFlyout = document.getElementById("listItemFlyout");
        listFlyout.winControl.show(invokedItem);
    });
});

Thank you in advance.

Answer 1

I found a way, just use the e.target object that infact contains the DOM object for the list item that was just clicked:

document.getElementById("theListView").addEventListener("iteminvoked", function (e) {

    var target = e.target;

    e.detail.itemPromise.then(function (invokedItem) {
        var listFlyout = document.getElementById("listItemFlyout");
        listFlyout.winControl.show(target);
    });
});