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。数据在那里！具有类名的元素就在那里！

我不知道发生了什么。如何在每个项目的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）

1 个答案:

如何访问listViews项目？ （WinJS）

1 个答案:

如何访问listViews项目？（WinJS）