实现主页面和分类页面的之后，最后来看一下菜肴页面的实现，这个页面用于详细介绍某项菜肴或主食，如名称、图片和具体做法等。在pages文件夹里面添加一个名为foodDetail的文件夹，并在foodDetail文件夹里添加一个"页面控制"项，将其命名为foodDetail。
打开默认生成的foodDetail.html文件，向文件的body元素中添加一个div元素，在div元素内部添加一个button元素和一个h1元素，其中button元素是回退按钮，h1元素用于显示类别名称，接着再在此div元素中嵌套添加一个div元素，并在刚添加的div元素内部添加一个h2元素、一个img控件和一个class属性值为"item-content"的div元素，其中h2元素用于显示菜肴名称，img控件用于显示菜肴图片，而div元素用于显示菜肴的做法，相关代码如下所示：
<body>
<div class="foodDetail 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>
</h1>
</header>
<div class="content" aria-label="Main content" role="main">
<article>
<header>
<!--显示菜肴名称-->
<h2 class="item-title"></h2>
</header>
<!--显示图片-->
<img class="item-image" src="#" />
<!--显示菜肴的具体做法-->
<div class="item-content"></div>
</article>
</div>
</div>
</body>
为了控制菜肴页面的显示外观，在foodDetail.css文件中设置相应的外观属性，相关代码如下所示：
/*设置菜肴的整体布局，包括位置和大小等*/
.foodDetail .content {
-ms-grid-row: 2;
position: relative;
height: 100%;
width: 100%;
display: block;
overflow-x: auto;
z-index: 0;
}
/*进一步设置菜肴的列宽、所占据的空间和边距等*/
.foodDetail .content article {
column-fill: auto;
column-gap: 80px;
column-width: 480px;
height: calc(100% - 50px);
width: 480px;
margin-left: 120px;
margin-top: 5px;
}
/*进一步设置菜肴名称的边距*/
.foodDetail .content article header .item-title {
margin-bottom: 20px;
margin-top: 0;
}
/*进一步设置菜肴图片的大小和边距*/
.foodDetail .content article .item-image {
height: 240px;
width: 460px;
margin-bottom: 3px;
}
/*设置菜肴做法的边距和对齐方式*/
.foodDetail .content article .item-content {
margin-bottom: 20px;
margin-right: 20px;
vertical-align: baseline;
}
定义了前台页面样式之后，打开foodDetail.js文件，在ready函数内添加如下代码，为界面元素设置数据源。
ready: function (element, options) {
//根据传递的参数来获取某项菜肴。如果没有传递参数，则获取第一项菜肴
var item = options && options.item ? menuData.resolveItemReference(options.item) : menuData.items.getAt(0);
//设置菜肴的类别名称
element.querySelector(".pagetitle").textContent = item.group.title;
//设置菜肴的名称
element.querySelector(".item-title").textContent = item.title;
//设置菜肴的图片
element.querySelector(".item-image").src = item.backgroundImage;
//设置菜肴的描述信息（即菜肴的具体作法）
element.querySelector(".item-content").innerHTML = item.content;
}
上面代码中，在ready函数里对options 和options.item进行判断，当参数options和options.item都不为空时，调用menuData命名空间里的resolveItemReference函数来根据某项菜肴的标识获取该项菜肴并赋值给变量item；否则获取第一项菜肴同样赋值给变量item。接下来调用element.querySelector函数来获取class属性为"pagetitle"的h1元素和class属性值为"item-title"的h2元素，并分别设置这两个元素的textContent属性值为item.group.title和item.title，用于显示菜肴类别名称和菜肴名称。然后使用element.querySelector函数来获取class属性为"item-image"的img控件，设置其src属性值为"item.backgroundImage"用于显示菜肴的图片。最后调用element.querySelector函数来获取class属性为"item-content"的div元素，设置其innerHTML属性值为item.content用于显示菜肴的做法信息。
启动调试，当点击某项菜肴时，如点击"红烧肉"这项菜肴，就会跳转到红烧肉详细页面，得到的效果如图19-36所示：
图19-36详细介绍红烧肉的页面