Question

- 在开始之前，我应该说我试图在没有库的情况下实现这一目标。对不起jQuery -

从一般意义上讲，当列表中没有项具有唯一的类名或id时，我想知道在列表中使用事件侦听器的最佳方法。更具体地说，我有这个：

目前，我有一个像this指南一样受数据限制的WinJS listView。如您所见，列表中的任何项都没有唯一的元素ID或类名。这引起了我的问题，因为我想为每个添加一个点击监听器，这样当你点击列表中的某个项时，就会发生this行为（如gif所示）。我需要一个子菜单显示在列表中与列表中相应项目对应的项目下方。

如果它们都有唯一的ID和/或类名，那么这很容易。但是既然他们没有，我想在有人点击某个项目时，你必须得到它是哪一个，然后为你点击的项目下面的列表中的所有项目添加一个类名，以便你可以使用它们向下移动它们WinJS .createExpandAnimation函数。然后，一旦子菜单关闭，就删除所有添加的类名。这真的是最好的方法吗？

我愿意完全删除listView，但我想以类似的方式进行数据绑定。有没有办法不使用listView（或其他库），这将使生活更轻松？

编辑：我的代码格式与Microsoft在演练中提供的格式相同。

<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    <div style="width: 150px; height: 100px;">

        <!-- Displays the "picture" field. -->
        <img src="#" style="width: 60px; height: 60px;" 
             data-win-bind="alt: title; src: picture" />
        <div>

            <!-- Displays the "title" field. -->
            <h4 data-win-bind="innerText: title"></h4>

            <!-- Displays the "text" field. --> 
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>       

<div id="basicListView" data-win-control="WinJS.UI.ListView" 
    data-win-options="{itemDataSource : DataExample.itemList.dataSource, 
        itemTemplate: select('#mediumListIconTextTemplate')}">
</div>

其中dataSource的定义如下：

 (function () {
"use strict";

var dataArray = [
{ title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
{ title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" }
];

var dataList = new WinJS.Binding.List(dataArray);

// Create a namespace to make the data publicly
// accessible. 
var publicMembers =
    {
        itemList: dataList 
    };
WinJS.Namespace.define("DataExample", publicMembers);

老实说，我甚至不确定它是否适用于WinJS listView，因此我可能必须完全改变它以使用HTML列表或类似的东西。

Answer 1

您可以使用oniteminvoked事件（http://msdn.microsoft.com/en-us/library/windows/apps/br211827.aspx）来处理ListView项目的点击，并且点击的项目将在事件处理程序的参数中可用。

您对该值的处理取决于您。使用它在ListView中插入一个项目，用它来显示被调用项目中的隐藏元素等。

对具有非唯一类名的元素执行操作

1 个答案: