Navigating through multimedia content - Build Windows 8 Apps with HTML5 and JavaScript - page 155

Adding a template for the item
The next step is adding a template so that the FlipView can render the bound Photo objects in a nicer
way. You go back to gallery.js and add the following line to GalleryApp.init:
flipView.itemTemplate = document.getElementById("gallery-template");
You also need to define the template gallery-template in the home.html file. You add the following
to the BODY of the home.html file:
<div id="gallery-template" data-win-control="WinJS.Binding.Template">
<div id="template-container">
<img class="image" alt="" src="#" data-win-bind="src: imageUrl" />
<div class="overlay">
<h2 data-win-bind="innerText: title"></h2>
</div>
</div>
</div>
The item template is made of an IMG element and an H2 element. These elements are bound to
the properties of the Photo object. You also need to add a few styles to home.css :
#gallery {
width: 600px;
height: 350px;
border: solid 4px #5a12f3;
background-color: #2c668d;
}
.image {
width:100%;
border: solid 1px #fff;
}
#template-container {
display: -ms-grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
width: 350px;
height: 300px;
background-color: #2faee6;
}
.overlay {
position: relative;
background-color: rgba(0,0,0,0.5);
-ms-grid-row-align: end;
height: 30px;
padding: 10px;
margin: 3px;