windows 8 移动应用程序 - 获取在线数据并显示 javascript

Question

我是 Windows 8 移动应用开发新手。

我正在用 Javascript/HTML5 自定义一个“网格应用”并尝试修改 data.js 以获取数据并填充“SampleDate”数组。

从网络提要中获取数据已完成，但问题是由于请求是异步的，因此无需等待响应即可继续执行。

数组总是为空，但是当我尝试将数组数据记录到控制台时，它会在获取后正确记录。

请给我一个解决方案，以便我可以填充和查看获取的数据。

这就是我更改默认generateSampleData() 方法的方式；

WinJS.xhr({ url: "http://www.yamu.lk/feed/" })
       .done(function complete(result) {

           console.log(result.responseXML);
           var items = result.responseXML.querySelectorAll("item");
           for (var n = 0; n < items.length; n++) {
               sampleItems[n] = { group: sampleGroups[0], title: items[n].querySelector("title").textContent, subtitle: "Item Subtitle: 1", description: items[n].querySelector("description").textContent, content: itemContent, backgroundImage: lightGray };
               console.log(items[n].querySelector("title").textContent);

           }


           },
           function error(error) {

           },
           function progress(result) {

           });

        return sampleItems;

Answer 1

您的问题源于您的 ListView 没有直接绑定到 sampleItems 数组，而是绑定到将 sampleItems 推送到其上的绑定列表。查看 data.js 的第 12 行：

 generateSampleData().forEach(function (item) {
    list.push(item);
});

您要做的是等待将数据推送到绑定列表中，直到从 Web 服务中检索到它。一种方法是让 generateSampleData() 函数返回 WinJS.xhr 承诺而不是 sampleItems 数组。所以 generateSampleData() 变成：

return WinJS.xhr({ url: "http://www.yamu.lk/feed/" });

第 12 行变为：

generateSampleData().done(function complete(result) {
       console.log(result.responseXML);
       var items = result.responseXML.querySelectorAll("item");
       for (var n = 0; n < items.length; n++) {
           list.push({ group: sampleGroups[0], title: items[n].querySelector("title").textContent, subtitle: "Item Subtitle: 1", description: items[n].querySelector("description").textContent, content: itemContent, backgroundImage: lightGray });
           console.log(items[n].querySelector("title").textContent);
       }});

或者类似的东西。

请务必查看 binding lists 的工作原理以了解更多信息。

Answer 2

1) 声明一个像 IsWaitingForData 这样的全局变量。

2) 发送请求前设置值为True；

3) 在done函数中，数据重做时将变量设置为false；

4) 使用数组。

您应该阅读 JavaScript 中的 Promise：Link

这是一篇关于异步编程的文章：Link

这是一篇关于承诺的好文章：Link

var promises=WinJS.xhr({ url: "http://www.yamu.lk/feed/" });
WinJS.Promise.join(promises).then(function () {
        //do something with array
    });