Windows 如何在WinJS应用程序中将多个不同的JSON对象添加到单独的列表中？

我正在尝试创建一个包含多个部分的网格应用程序，每个部分都被提取到一个特定的listview，但是我遇到了一个问题，您只能有一个listview覆盖整个页面，以便正确地水平滚动列表中的对象，这意味着没有空间容纳另一个。这是我现在正在使用的代码：

WinJS.xhr({ url: "http://search.twitter.com/search.json?q=%23windows8&rpp=100}).then(

            function (response) {
                var json = JSON.parse(response.responseText.toString());
                var list = new WinJS.Binding.List(json.result);
                gridView1.winControl.itemDataSource = list.dataSource;

                //gridView1 is ID of listview 

            }

通过上面的代码，我可以轻松地显示包含结果数组的对象网格，然后将它们绑定到列表中。但是，现在我希望不同URL的多个类似列表视图显示为WinJS grid app中的默认界面

更清楚地说，这就是我想要的——通过使用Twitter API URL1在网格的第一部分使用Twitter用户名，然后我想要在相邻网格中使用Twitter搜索结果，所以我必须使用另一个使用URL2的listview b

---

我如何找到解决方法。谢谢你的帮助

您可以通过将结果集聚合到单个数据源中来解决此问题

您可以通过将数据浪费到使用分组函数设置的

WinJS.Binding.List

中，并以您知道如何对数据进行分组的方式对数据进行属性化。执行File/New/Project时，可以在VisualStudio中的“网格”模板中找到

WinJS.Binding.List

的分组示例

---

或者，您可以构建自己的数据

VirtualizedDataSource

——MSDN上有一个很好的教程。是的，提出不同列表中所有不同项目的共同点，并将数据投影到单个分组列表是一个选项。你可能不想放弃你想做的事情。如果您将多个ListView放在一个包装在flexbox中的页面上，那么滚动应该不会有任何问题。如果你在ListView演示中查看我的应用程序，你会发现我的应用程序大致相当。Windows实际上在处理平移的方式上非常聪明

**编辑**

这是我所说的一个粗略的例子。同样，您可以在的ListView演示中找到这方面的工作示例

/*CSS片段*/
.中心{
显示：-ms flexbox；/*这将水平排列列表*/
overflow-x:auto；/*将flexbox设置为滚动其溢出*/
}
/*选择每个部分*/
.hub>div{
右边填充：80px；/*80px“部分”之间的空间*/
}
/*为列表视图选择所需的大小。你可以把它们弄宽
足够让他们不滚动了，因为滚动会有点尴尬
在滚动范围内*/
[data win control=WinJS.UI.ListView]{
宽度：640px；
高度：480px；
}

您是在询问如何对数据进行分组，还是如何拥有多个列表视图？是的，对数据进行分组是可行的。事实上，我想在listview示例中复制组数据，但我该怎么做呢？不同的URL需要不同的listview，对吗？是的，我确实看到了你提到的示例-它与本地图像一起工作，解决了大部分问题。任何带有json/xml数据的VirtualizedDataSource示例？它不适用于图像；它使用的数据枚举JSON结果中的图像，这些图像可用于公开该数据源。（见第6.3节）好吧，这绝对不是我看到的，我的错。我会处理它并让你知道结果，谢谢。嘿，你能找到两个或更多的xml/json URL被用于网格应用的例子吗？或者甚至是一个将多个JSON/XML URL绑定到单个数据源的示例？嘿，请您详细说明“如果您将多个ListView放在一个封装在flexbox中的页面上，您应该不会在滚动方面遇到任何问题”。你们想让我制作CSS flexbox控件的两个列表视图子控件吗？您能否提供一个快速示例（2个采样列表框数据+flexbox）？因为我确实试过了，但它并没有真正起作用。互联网上的自动取款机与此无关，会帮助很多人。明白了。绝对的天才：D非常感谢！

<!-- HTML snippet -->
<div class="hub">
  <div>
    <div id="list1" data-win-control="WinJS.UI.ListView"></div>
  </div>
  <div>
    <div id="list2" data-win-control="WinJS.UI.ListView"></div>
  </div>
  <div>
    <div id="list3" data-win-control="WinJS.UI.ListView"></div>
  </div>
</div>

/* CSS snippet */
.hub {
  display:-ms-flexbox; /* this will lay the lists out horizontally */
  overflow-x:auto; /* set the flexbox to scroll its overflow */
}

/* select each of the sections */
.hub > div {
  padding-right:80px; /* 80px of space between "sections" */
}

/* choose whatever sizes you want for your list views. You may want to make them wide
enough that they don't scroll because it can get a little awkward to have scrolling
within scrolling */
[data-win-control=WinJS.UI.ListView] {
  width: 640px;
  height: 480px;
}