WinJS：附加到单击的 ListView 项的 Flyout答案

【问题标题】：WinJS: Flyout attached to clicked ListView itemWinJS：附加到单击的 ListView 项的 Flyout
【发布时间】：2014-01-21 19:37:20
【问题描述】：

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

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

列表视图 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>

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

提前谢谢你。

【问题讨论】：

我意识到我可以为 ListView 中的每个元素添加一个唯一 ID，然后将其与 listview 绑定一起存储。然而，这似乎很不优雅，感觉应该有一个更直接的方法。

标签： javascript windows-store-apps winjs windows-8.1

【解决方案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);
    });
});

【讨论】：