javascript - 如何访问listViews项目？ (WinJS)

Question

我正在尝试在 WinJS (Windows Phone 8.1 UWP) 中的 ListView 上添加上下文菜单。首先，我想通过选择元素并添加事件监听器来添加它。这是我的 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。数据就在那里!带有类名的元素就在那里!

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

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