0

我有一个充满图像的 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'。我以为我在上面的代码中定义了它

4

4 回答 4

1

要获取在 winjs 列表视图中单击了哪个项目的详细信息，我们可以使用 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); 功能项目调用（EVT）{

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

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

于 2013-09-04T12:09:59.370 回答
0

全局分配一个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 上

于 2013-06-12T13:50:18.243 回答
0

您可以做到这一点的最好和最简单的方法是通过在用于 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;
于 2013-06-28T13:25:52.010 回答
0

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

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

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

于 2013-06-12T13:51:31.963 回答