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

时间:2013-01-14 21:58:01

标签: windows windows-8 winjs

我正在尝试创建一个包含各个部分的网格应用程序,每个部分都被提取到特定的列表视图但是我遇到了一个问题,你只能有一个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 

            }

使用上面的代码,我可以轻松地显示包含结果数组的对象的网格,然后将em绑定到列表。但是现在我想要显示不同URL的多个类似列表视图,这些URL显示为在WinJS网格应用程序中显示为默认界面的URL。

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

如何找到解决此问题的方法。感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

是的,提出来自不同列表的所有不同项目的共同点,并将您的数据投影到单个分组列表是一种选择。你可能不想放弃你想要做的事情。如果在包含在flexbox中的页面上放置多个ListView,则滚动时不会有任何问题。如果你在ListView演示中查看我的codeSHOW应用程序,你会发现我有相同的粗略信息。 Windows实际上非常聪明地处理平移。

** 编辑 **

这是我正在谈论的一个粗略的例子。同样,您可以在codeSHOW的ListView演示中找到相关的工作示例。

<!-- 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;
}

答案 1 :(得分:0)

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

您可以通过将数据重新分配到已使用分组功能设置的WinJS.Binding.List来执行此操作,并以您知道如何对数据进行分组的方式对数据进行归因。可以在执行文件/新建/项目时在Visual Studio中找到的“网格”模板中找到WinJS.Binding.List分组的示例。

或者,您可以构建自己的数据VirtualizedDataSource - 在MSDN here上有一个很好的教程。