javascript - 在 ListVIew 中动态绑定(bind)项目

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 操作中的忍者技能来处理它们。

希望对您有所帮助!!

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