Javascript 如何使用WinJS.UI.ListView和ListLayout布局实现组

如何使用WinJS.UI.ListView和ListLayout实现组：

        <div id="itemTemplate" data-win-control="WinJS.Binding.Template">
            <div data-win-bind="innerText: title"></div>
        </div>  
        <div id="headerTemplate" data-win-control="WinJS.Binding.Template">
            <div data-win-bind="innerText: group"></div>
        </div>  
        <div id="menu" data-win-control="WinJS.UI.ListView" data-win-options="{automaticallyLoadPages:false, groupHeaderTemplate:select('#headerTemplate'), groupDataSource:QuickGuide.itemListGrouped.groups.dataSource, itemDataSource:QuickGuide.itemListGrouped.dataSource, itemTemplate:select('#itemTemplate'), layout:{type:WinJS.UI.ListLayout}}">
        </div>

---

它只适用于GridLayout，而不适用于ListLayout。

我不认为

ListLayout

像

GridLayout

那样支持

groupHeader

。参考MSDN文档，有

groupHeader

属性，但没有。也许微软认为为

ListLayout

设置

groupHeader

没有意义，因为在我看到的所有示例中，垂直滚动的

ListLayout

要么没有“组”，要么在

ListView中将“groupHeader”显示为列表项，而不是真正的项（参考：VS11生成的GridLayout应用程序）。如果您不想使用带有
groupHeader
的水平滚动
ListView
，则只需使用css使其看起来像“列表项”而不是“网格”（参考：/Build//Consumer Preview store中的应用程序）
我想你就在这里，不过有点烦人，因为我想使用listLayout来显示一个简单的列表，在不同的组之间只需一个“标题”即可选择。
function getGroupKey(dataItem) {
    return dataItem.group;
}

function getGroupData(dataItem) {
    return {
        group: dataItem.group
    };
}

var dataList = new WinJS.Binding.List(dataArray);
var dataListGrouped = dataList.createGrouped(getGroupKey, getGroupData);

WinJS.Namespace.define("QuickGuide", {
    data: dataArray,
    itemList: dataList,
    itemListGrouped: dataListGrouped
});