javascript - ListVIew 中的动态绑定项

Question

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

我确定我以某种方式想念它，只是进入这个......

Answer 1

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

首先是创建一个命令式模板渲染函数。首先，告诉您 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 操作中的忍者技能来处理它们。

希望有帮助！！

PS 查看 codeSHOW 了解更多 Windows 8 中的 HTML/JS 开发（aka.ms/codeshowapp | codeshow.codeplex.com）