Question

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

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

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

提前谢谢你。

Answer 1

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

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

WinJS：Flyout附加到单击的ListView项目

1 个答案: