WinJS - 在加载时将“选定”样式添加到列表视图中的第一项答案

【问题标题】：WinJS - Adding 'selected' style to first item in listview on loadWinJS - 在加载时将“选定”样式添加到列表视图中的第一项
【发布时间】：2013-07-20 22:22:27
【问题描述】：

我目前正在尝试使用列表视图来驱动 Windows 应用商店应用程序 (HTML/JS) 中单独 div 的内容。

我有一个简单的函数，我在我的列表视图的“oniteminvoked”处理程序中调用它。

方法调用

MyApp.Util.addClassById(q(".item"), item.itemId, "selected");

（其中 item.itemId 是我新选择的项目，'q' 是 WinJS.Utilities.query 的别名）

方法声明

function addClassById(elements, selectedId, className) {

    elements.forEach(function (el) {

        var id = parseInt(el.attributes['data-id'].value, 10);

        if (id === selectedId) {
            util.addClass(el, className);
        }
        else {
            util.removeClass(el, className);
        }
    });
}

加载列表视图并选择新项目后，这将按预期工作。当我尝试在相关页面的ready 函数中调用它时，它不会加载。

当我进行调试时，我对列表中项目的查询似乎在页面 ready 函数期间没有返回任何内容，所以我假设此时尚未呈现列表并且DOM 查询不返回任何内容。

所以问题是，在渲染后选择项目（或在列表视图上执行操作）的推荐方法是什么？

我认为它们可能是一个“afterrender”类型的事件，我可以在其中调用该函数，但我似乎找不到任何有效的方法。

有什么想法吗？

【问题讨论】：

标签： windows-8 winjs windows-store

【解决方案1】：

据我所知，最好的方法是捕获 onloadingstatechanged 事件并等待 ListView 被“加载”。您可以访问我的博客文章http://codefoster.com/loadingstates

【讨论】：

我在尝试在列表视图中选择一个项目时遇到了同样的问题。我可以使用 listView.selection.set(index) 选择它，其中 index 是一个数字，但是如何在列表视图中找到我想要以编程方式选择的项目？
加载列表后，您可以访问所有 DOM 表示，但不能访问底层数据。标识元素的最简单方法是以编程方式将 data- 属性添加到 dom 中，然后查找它。例如，如果您在项目中添加 data-id="17"，那么您可以迭代您的列表（在加载后）并读取 data-id 值以查找您想要的值。
请看看我对这个问题的回答，我想我找到了一种遍历列表项的方法。很高兴知道这是否是一种可接受的方式，因为没有太多关于此的文档。谢谢

【解决方案2】：

看看这段代码，它遍历列表中的所有数据并将其与另一个列表进行比较，以选择与数据中的 id 匹配的每个元素。

如果你使用element.querySelector 而不是document.getElementById，你可以在你的准备函数中使用它。

var itemList= [
{ id: "11", name:"value1" }, 
{ id: "12", name:"value2" }
]

    var listView = document.getElementById("listViewOwners").winControl;

    var itemsInFavList = listView.itemDataSource.getCount()._value;
    for (var i = 0; i < itemsInFavList; i++) {
        var item = listView.itemDataSource.itemFromIndex(i);

        if (compareArray(itemList, item._value.data).length > 0)
        {    
            listView.selection.add(item._value.index);
        }
    }
}

//this function uses the filter function to check 
//if the element from the listView is contained in the data list
function compareArray(itemList, data){

    return itemList.lineOwners.filter(
        function (subitem) {
            return subitem.id === data.key
        });
    }

【讨论】：