javascript - WinJS:弹出按钮附加到单击的ListView项

如何将WinJS Flyout附加到ListView中被调用的项目？
我尝试使用下面列表中的invokedItem，它引发“对象不支持属性或方法'getBoundingClientRect'”以及通过(使用下面的示例名称)返回的项目:App_Windows.Data.listdata.getAt(invokedItem.index);，具有相同的问题。

我想我想念如何从列表的数据源中的项目转到应用程序的html“页面”上的元素。

列表 View HTML

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

弹出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);
    });
});

先感谢您。

最佳答案

我找到了一种方法，只需使用实际上包含刚刚单击的列表项的DOM对象的e.target对象:

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);
    });
});

关于javascript - WinJS:弹出按钮附加到单击的ListView项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20915418/