MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Again, we have the same use of WinJS.Binding.Template and various bits of data-binding syntax
sprinkled around the markup, not to mention the click handler assigned to the header text itself,
which, like an item in snapped view, navigates to the group detail page.
As for the data itself (that you’ll likely replace), this is again defined in js/data.js as an in-memory
array that feeds into WinJS.Binding.List. In the sampleItems array each item is populated with inline
data or other variable values. Each item also has a group property that comes from the sampleGroups
array. Unfortunately, this latter array has almost identical properties as the items array, which can get
confusing. To help clarify that a bit, here’s the complete property structure of an item:
{
}
group : {
key,
title,
subtitle,
backgroundImage,
description
},
title,
subtitle,
description,
content,
backgroundImage
As we saw with the ListView grouping sample earlier, the Grid App project template uses
createGrouped to set up the data source. What’s interesting to see here is that it sets up an initially
empty list, creates the grouped projection (omitting the optional sorter function), and then adds the
items by using the list’s push method:
194