1

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>

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私はサポートgroupHeaderを考えていないと思いますGridLayout。MSDN ドキュメントを参照すると、プロパティがWinJS.UI.GridLayoutありますが、ありません。マイクロソフトは、私が見たすべてのサンプルで、垂直スクロールに「グループ」がないか、実際の代わりに「groupHeader」をリスト項目として表示するため、 forを持つことは意味がないと考えているのかもしれません。(参照: VS11 によって生成された GridLayout アプリケーション)のアイテム。で水平方向にスクロールしたくない場合は、css を使用して、「グリッド」ではなく「リスト項目」のように見せてください (ref: Consumer Preview ストアの /Build// アプリ)。groupHeaderWinJS.UI.ListLayoutgroupHeaderListLayoutListLayoutListViewListViewgroupHeader

于 2012-05-15T13:46:00.210 に答える