1

--在开始之前，我应该说我正在尝试在没有库的情况下完成此任务。对不起 jQuery--

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

目前，我有一个 WinJS listView，它像本指南中一样是数据绑定的。如您所见，列表中的任何项目都没有唯一的元素 id 或类名。这给我带来了一个问题，因为我想为每个点击监听器添加一个点击监听器，这样当你点击列表中的某个项目时，就会发生这种行为（如 gif 所示）。我需要一个子菜单出现在列表中与列表中相应项目相对应的项目下方。

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

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

编辑：我的代码与微软在他们的演练中提供的格式相同。

<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 列表或类似的东西。

4

1 回答 1

0

您可以使用oniteminvoked事件 ( http://msdn.microsoft.com/en-us/library/windows/apps/br211827.aspx ) 来处理 ListView 项的单击，单击的项将在事件处理程序的范围。

你用这个值做什么取决于你。用它在 ListView 中插入一个项目，用它来显示被调用项目中的隐藏元素等。

于 2013-07-16T20:55:52.630 回答