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

The Clip object represents the information you'll be working with in the exercise. It represents a
YouTube video and it has a category and a title. The videoId property represents the unique YouTube
identifier of the clip. The videoUrl property returns the URL required to view the clip from within a
Windows Store application; the posterUrl property returns the URL required to get the poster image
for the video from YouTube.
The next step consists of creating a bindable collection of data. This step is not really different from
the step you accomplished in the previous exercise. Also, add the following code to the videos.js file:
VideosApp.init = function () {
var videos = [
new Clip("Shots", "Top 10 Best Tennis Shots Ever", "WyJM9-7OvZo"),
new Clip("Fun", "Very funny point", "ybsbzV7fNEo"),
new Clip("Shots", "Best shot of 2012", "tEAkvegtPyw"),
new Clip("Shots", "Insane passing shot", "UH5TMp_bH8k"),
new Clip("Events", "Most important match point", "xHUwmMyRVJI")
];
// Create a WinJS.Binding.List from the array.
var videosList = new WinJS.Binding.List(videos);
var videosListGrouped = videosList.createGrouped(
function (clip) { return clip.category; }, // group by this key
function (clip) { return { category: clip.category } } // data for the
master view data
);
}
So you have a collection of tennis-related video clips and you catalogued them in three main
categories: Shots, Fun, and Events. Needless to say, this classification is entirely arbitrary and
categories, as well as titles, are entirely up to you.
Grouping data for semantic zoom
In a Windows Store application, you are not allowed to perform data binding on raw JavaScript
arrays; you first need to transform arrays in a binding list. You do that through the WinJS.Binding.List
object. This is just what you did to populate a FlipView component in the previous exercise. With a
SemanticZoom component, an extra step is required.
A binding list object exposes the method createGrouped through which you create a groupable
binding list. As you can see above, the createGrouped method takes two functions as arguments. The
first function just identifies the key on which the items will be grouped. The second function returns
the JavaScript object that will be used to render each item in the master view. Let's examine the code
more closely:
var videosListGrouped = videosList.createGrouped(
function (clip) { return clip.category; },