实现主页面的功能之后，接下来实现分类页面。分类页面中显示一种菜肴类别的详细信息，包括类别名称、图片、描述信息以及属于该类别的一些菜肴。在pages文件夹中添加一个名为classDetail的文件夹，并在classDetail文件夹中添加一个"页面控制"项，将其命名为classDetail，与主页面一样，添加完成之后会默认生成classDetail.html、classDetail.js和classDetail.css这三个文件。
打开classDetail.html文件，在body元素中添加一个div元素，并在div元素内部添加一个button元素、一个h1元素和一个ListView控件，其中button元素是回退按钮，h1元素用于显示菜肴的类别，而ListView控件则用于显示某一类别的菜肴信息。接着再在body元素中添加两个Template控件，分别用来格式化显示类别信息和某一类别中的菜肴。在用于显示类别信息的Template控件中添加一个img控件和一个h4元素，分别用来显示菜肴类别图片和菜肴类别的描述信息；在用于显示某一类菜肴的Template控件中添加一个img控件和两个h4元素，分别用来显示菜肴的图片和描述信息，相关代码如下所示：
<div class="classDetail fragment">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" ></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle"></span>
<!--定义ListView控件，用于显示显示类别信息和菜肴-->
<div class="headerTemplate" data-win-control="WinJS.Binding.Template">
<!--将src属性与数据源中的backgroundImage字段相绑定，将alt属性与数据源中类别名称title 字段绑定-->
<img class="group-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
<h4 class="group-description" data-win-bind="textContent: description"></h4>
<div class="itemTemplate" data-win-control="WinJS.Binding.Template">
<!--将src属性与数据源中的backgroundImage字段相绑定，将alt属性与数据源中菜肴名称title 字段绑定-->
<img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
<h4 class="item-title" data-win-bind="textContent: title"></h4>
<h4 class="item-description" data-win-bind="textContent: description"></h4>
为了控制类别信息和菜肴的显示外观，在classDetail.css文件中设置相应的外观属性，相关代码如下所示：
.classDetail .itemslist .win-horizontal.win-viewport .win-surface {
.classDetail .itemslist .win-groupheader {
.classDetail .itemslist .win-groupheader .group-image {
.classDetail .itemslist .win-groupheader .group-description {
.classDetail .itemslist .win-item {
.classDetail .itemslist .win-item .item-info {
.classDetail .itemslist .win-item .item-info .item-title {
.classDetail .itemslist .win-item .item-info .item-description {
.classDetail .itemslist .win-container {
background-color: rgba(0, 0, 0, 0);
ready: function (element, options) {
//根据传递的参数来获取某个类别以及该类别中的所有菜肴。如果没有传递参数，则获取第一个类别和该类别中的菜肴
this.items = menuData.getItemsFromGroup(group);
var pageList = this.items.createGrouped(
function groupKeySelector(item) { return group.key; },
function groupDataSelector(item) { return group; }
element.querySelector(".pagetitle").textContent = group.title;
var listView = element.querySelector(".itemslist").winControl;
listView.groupDataSource = pageList.groups.dataSource;
listView.itemDataSource = pageList.dataSource;
listView.groupHeaderTemplate = element.querySelector(".headerTemplate");
listView.itemTemplate = element.querySelector(".itemTemplate");
listView.layout = new WinJS.UI.GridLayout({ groupHeaderPosition: "left" });
listView.oniteminvoked = this.ItemInGroupPage_Click.bind(this);
上面代码中，在ready函数里对options和options.groupKey进行判断，当参数options和options.groupKey不为空时，调用menuData命名空间下的resolveGroupReference函数根据参数groupKey获取该分类并赋值给变量group；否则获取第一个分类并赋值给变量group。然后调用getItemsFromGroup函数根据变量group来获取指定类别中的所有菜肴并赋值给items变量，使用items的createGrouped函数按照key和group属性值对菜肴进行分组，并把分组的结果赋值给pageList对象。接下来调用element.querySelector函数获取class属性为"pagetitle"的h1元素，将其textContent属性值设置为group.title来显示分类的标题，并通过element.querySelector函数获取class属性值为" itemslist"的ListView控件，将其赋值给listView对象。
接着在ready函数后面定义事件处理函数ItemInGroupPage_Click，相关代码如下所示：
ItemInGroupPage_Click: function (args) {
var item = this.items.getAt(args.detail.itemIndex);
启动调试，当在主页页面上单击某个类别名称时，如"蔬菜类"，会跳转到这个类别的详细介绍页面，同时还会显示属于这个类别的一些菜肴，如拌黄瓜、红烧冬瓜和蒜香茄子等，得到的效果如图19-35所示：
