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 )