如何访问 listViews 项目？ (WinJS)

Question

我正在尝试在 WinJS (Windows Phone 8.1 UWP) 的 ListView 上添加上下文菜单。首先，我想通过选择元素并添加 EventListenter 来添加它。这是我的 HTML 代码：

<div class="friendsTemplate" data-win-control="WinJS.Binding.Template">
    <div class="templatecontainer">
        <img src="/images/default-avatar.png" />
        <div class="itemcontainer">
            <div class="itemtitle label-extralarge" data-win-bind="textContent: nickname"></div>
            <div class="label-mediummid" data-win-bind="textContent: quotation"></div>
        </div>
    </div>
</div>

<div id="listView" data-win-control="WinJS.UI.ListView"
     data-win-options="{
     itemDataSource: WinJS.Application.sessionState.friendslist.dataSource,
     itemTemplate: select('.friendsTemplate'),
     layout: { type: WinJS.UI.ListLayout }
     }"></div>

这是我第一个失败的方法：

var myList = document.querySelectorAll('.templatecontainer');
for(var i = 0; i < myList.length; i++) {
    myList[i].addEventListener('contextmenu', function(e) {
        // code for context menu
    }
}

但是 myList 是空的。然后我尝试了一种不同的方法：

var myList = document.getElementById('listView');
myList.addEventListener('contextmenu', function (e) {
    console.log(e.srcElement.getElementsByClassName('templatecontainer'));
});

我在函数中手动检查了e。数据在那里！ class 名称的元素在那里！

我不知道发生了什么。如何在我的 listView 中的每个项目的 JavaScript 中创建上下文菜单？

Answer 1

下班后我终于找到了解决办法。这样我就可以获得列表中项目的索引及其昵称。这些对我的情况来说已经足够了。谢谢！

document.getElementById('listView').winControl.addEventListener('contextmenu', function () {
    var index = document.getElementById('listView').winControl.currentItem.index;
    var selectedItem = document.getElementById('listView').winControl.elementFromIndex(index);
    var nickname = selectedItem.getElementsByClassName('nickname')[0].innerText;
})

如何访问 listViews 项目？ (WinJS)

How to access listViews items? (WinJS)

javascript

listview

windows-store-apps

windows-phone-8.1