ListVIew中的动态绑定项

时间:2013-01-20 02:13:56

标签: javascript listview windows-8 windows-store-apps winjs

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

我确定我以某种方式错过了它,只是进入了这个......

1 个答案:

答案 0 :(得分:2)

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

首先是创建命令式模板渲染功能。首先,告诉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操作中使用您的忍者技能来与他们合作。

希望有所帮助!!

P.S。查看codeSHOW以了解更多Windows 8中的HTML / JS开发(aka.ms/codeshowapp | codeshow.codeplex.com