Question

我目前正在尝试使用listview来驱动Windows应用商店应用（HTML / JS）中单独div的内容。

我有一个简单的函数，我在listview的'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);
        }
    });
}

在加载listview并选择新项目后，这可以正常工作。无法加载的地方是我尝试在我的ready函数中为相关页面调用它时。

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

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

我认为他们可能是一个'后悔'类型的事件，我可以调用该函数，但我似乎无法找到任何有用的东西。

有什么想法吗？

Answer 1

我知道这样做的最好方法是捕获onloadingstatechanged事件并等待ListView被“加载”。您可以在http://codefoster.com/loadingstates

访问我的博文，了解具体方法

Answer 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
        });
    }

WinJS - 在加载时将“选定”样式添加到listview中的第一个项目

2 个答案: