Question

我有一个充满图像的winJS列表。当用户点击图像时，它们将被发送到第二页。是否有任何方法可以确定用户在第1页上单击了哪个图像（每个图像，当单击时，转到同一页面2，但使用自定义div）。这是我的列表声明，然后我推送项目：

var names_Array = [];

var names_List = new WinJS.Binding.List(names_Array);

var idPL;
names_List.push({ name: "man 1", image: "image/man1.png", ClientID: "1111" });

names_List.push({ name: "man 2 ", image: "image/man2.png", ClientID: "2222" }); 



idPL = document.getElementById("names_List");
                 idPL.addEventListener("iteminvoked", onclickItem);


function onclickItem(e) {
      console.log("Item clicked");
}

我根据上次将哪个项目推送到列表来填充div的时间，但我需要更灵活，并且能够选择第一个项目（即使已经添加了第二个项目）编辑：我现在得到一个错误'无法获取未定义或空引用的属性'addEventListener'。我想我已经在上面的代码中定义了它

Answer 1

要获取在winjs listview中单击哪个项目的详细信息，我们可以使用Winjs列表视图的itemInvoke事件。

<div id="itemsList" data-win-control="WinJS.Binding.Template" style="display:none;">

       <div data-win-bind="className: type">
             <img src="#" style="width: 100px; height: 100px;" 
                 data-win-bind="alt: title; src: picture" />

           <div>
            <h4 data-win-bind="innerText: title" style="width:100px; height:20px;"></h4>
           </div>
           <div>
               <img  id="like"src="images/like.png" class="win-interactive"  data-win-bind="alt:title; onclick: LikeClick;" />
               </div>
       </div>

    </div>

 <div id="UserListView" data-win-control="WinJS.UI.ListView" style="border-top: 5px solid #000; min-width:500px;" 
           data-win-options="{
                               selectionMode:'multi',
                               itemTemplate:select('#itemsList'),
                               layout:{    
                               type:WinJS.UI.GridLayout}}"
         > 

    </div>

然后在js

UserListView.addEventListener（“iteminvoked”，ItemInvoke）; function ItemInvoke（evt）{

    var name=evt.detail.itemPromise._value.data.title;
    var picturePath=evt.detail.itemPromise._value.data.picture;
}

在此列表视图中，我们仅显示用户的图像和标题。

Answer 2

全局分配eventListener并检查点击的内容并执行某项操作，或为每个项目分配eventListener并执行您需要的操作。

更新：我无法演示使用WinJS，但这个例子就足够了。

HTML

<ul id="names_List"></ul>

的Javascript

var names_Array = [],
    idPL = document.getElementById("names_List");

names_Array.push({
    name: "man 1",
    image: "image/man1.png",
    ClientID: "1111"
});

names_Array.push({
    name: "man 2 ",
    image: "image/man2.png",
    ClientID: "2222"
});

names_Array.forEach(function (item) {
    var li = document.createElement("li"),
        img = document.createElement("img");

    img.name = item.name;
    img.src = item.img;

    li.appendChild(img);
    idPL.appendChild(li);
});

function onclickItem(e) {
    if (e.target.tagName === "IMG") {
        console.log("Item clicked", e.target.name);
    }
}

idPL.addEventListener("click", onclickItem, false);

在jsfiddle

上

Answer 3

您可以重新格式化图片网址以包含：

哈希：image.html#man1.png
查询字符串：image.html?image=man1.png

然后使用它们在加载第二页时使用JavaScript从URL中提取信息。

Answer 4

你可以做到这一点的最好和最简单的方法是在一个eventlistener中为selectionchanged声明一个带有图像值的命名空间，如下所示：

            listview.addEventListener("selectionchanged", function (item) {
            listview.selection.getItems().done(function (items) {
            WinJS.Namespace.define("imageInformation", {
                        seletedImage: items[0].data.image,
                    });
            }, false);

声明命名空间后，您可以在另一页上访问它：

var path = imageInformation.selectedImage;

确定点击了哪个列表项 - javascript

4 个答案: