1

如何使用带有 ListLayout 的 WinJS.UI.ListView 实现组：

        <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>

JS文件：

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

它仅适用于 GridLayout，不适用于 ListLayout。

4

1 回答 1

2

我认为不认为ListLayout支持 a 。参考 MSDN 文档，有属性，但没有。也许微软认为有一个for没有意义，因为在我看到的所有示例中，垂直滚动要么没有“组”，要么将“groupHeader”显示为列表项而不是真实的（参考：VS11 生成的 GridLayout 应用程序）中的项目。如果您不想水平滚动，那么只需使用 css 使其看起来像“列表项”而不是“网格”（参考：/Build// 消费者预览商店中的应用程序）groupHeaderGridLayoutWinJS.UI.GridLayoutgroupHeaderWinJS.UI.ListLayoutgroupHeaderListLayoutListLayoutListViewListViewgroupHeader

于 2012-05-15T13:46:00.210 回答