在 Metro 应用程序中将 JSON 字符串绑定到 ListView？答案

【问题标题】：Binding JSON string to ListView in Metro apps?在 Metro 应用程序中将 JSON 字符串绑定到 ListView？
【发布时间】：2012-08-16 11:52:46
【问题描述】：

我有一个 Metro 应用程序（HTML5 和 WinJS），我试图在其中显示服务数据。实际上，这里是从我的服务中检索 JSON 数据，但无法将此数据绑定到 listview 。任何人都可以给我一些工作示例。

谢谢。

【问题讨论】：

您能否详细说明“无法将此数据绑定到列表视图”的含义？你有例外吗？您能否发布将 JSON 数据添加到所需 WinJS.Binding.list 并将其连接到 ListView 控件的代码？

标签： html data-binding microsoft-metro winjs

【解决方案1】：

您可以为此使用WinJS.xhr()。您可以在此链接https://msdn.microsoft.com/pt-br/library/windows/apps/br229787.aspx 上阅读更多相关信息，这是一个示例：

var path = "data/file.json";
function getData(path) {
    WinJS.xhr({ url: path }).then(
        function (response) {
            var json = JSON.parse(response.responseText);

            // Since this is an asynchronous function, you can't
            // return the data, so you can:
            // 1) retrieve the data to a namespace once the app loads.
            var list = new WinJS.Binding.List(json);
            Somenomespace.data = list;

            // 2) or do all the binding inside the function.
            var listView = document.getElementById("listViewID");
            listView.winControl.itemDataSource = list.dataSource;
        });
}

【讨论】：

【解决方案2】：

如果你使用内置的 JSON.parse(jsonString) 函数，你可以使用普通的 for 循环遍历内容，因为它是一个普通的对象并像往常一样添加它。只要记住处理或渲染数据。

她是我在使用列表视图的搜索页面中的代码示例：

var response = JSON.parse(data) ; 
var originalResults = new WinJS.Binding.List();

for (x in response) {
    originalResults.push(response[x]); 
}

this.populateFilterBar(element, originalResults); 
this.applyFilter(this.filters[0], originalResults);

【讨论】：

很难在手机上缩进代码......当我在电脑上时会修复
@谢谢 Sindre，这里 populateFilterBar,applyFilter&filters 的意思是？那些是 html 元素的 id？
这些是微软提供的原始搜索模板中的方法。如果我没记错的话，基本上他们只是运行一个 WinJS.Binding.processAll