在ListVIew中动态绑定项

Dynamically Binding Items in ListVIew

本文关键字：动态绑定 ListVIew      更新时间：2023-09-26

在我的Windows 8 JavaScript应用程序中，我有一个ListView。我需要添加消息或链接到一行，这取决于当前用户的状态。所以我需要根据一些标志来显示或隐藏项目。如何，使用ListView的JavaScript API，我解析项目在项目级别?根据MSDN, ListView控件上没有项的集合，我需要在行级别访问数据和项。

我肯定我错过了它，只是进入这个....

我不完全清楚你想做什么，但我会试一试。如果您需要有条件地显示或隐藏项目(或项目的某些部分)，您可以使用以下几种方法。

第一个是创建一个命令式模板呈现函数。首先，告诉ListView它的项目模板是一个类似于myListView.itemTemplate = myCustomFunction的函数。然后编写如下函数: 
function myCustomFunction(itemPromise) {
    //you have to return a promise
    return itemPromise.then(function (item) {
        //get the right item template (declared in your HTML),
        //render the item data into it, and return the result
        var itemTemplate;
        if (item.data.key === "foo")
            itemTemplate = q("#fooItemTemplate", element); //return foo template
        else if (item.data.key === "bar")
            itemTemplate = q("#barItemTemplate", element);
        return itemTemplate.winControl.render(item.data);
    });
}

如果其中一个项目模板有显式的样式代码来显示或隐藏部分，而另一个没有，那么你将得到你想要的结果。

另一种方法是等待ListView完成加载，然后根据您的条件遍历和操作DOM。

要捕捉ListView完成加载的瞬间，执行以下操作:

myListViewControl.onloadingstatechanged = function (e) {
    if (myListViewControl.loadingState == "complete") {
        ...
    }
}

ListView在加载时经历了几个加载状态，最后一个是"完成"。完成后，您可以使用CSS选择器的强大功能和ECMAScript 5提供的新querySelector/querySelectorAll方法来查找所有ListView项，如下所示:

myListView.querySelectorAll(".win-item")

这将返回一个包含所有ListView项的NodeList，你可以在DOM操作中使用忍者技能来使用它们。

希望有帮助!!

注:查看codeSHOW了解更多Windows 8中的HTML/JS开发。Ms/codeshowapp | codeshow.codeplex.com)

相关文章：