MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

The header template in html/scenario1.html is very simple (and the item template is like what we’ve
already seen):
This is referenced in the control declaration (other options omitted):
For the data sources, you can see that we’re now using a variable called myGroupedList with a
property inside it called groups. What’s all this about?
Well, let’s take a short conceptual detour. Although computers have no problem chewing on a
bunch of raw data like the myList array, human beings like to view data with a little more organization.
The three primary ways of doing this are grouping, sorting, and filtering. Grouping organizes items into
groups, as shown in Figure 5-3; sorting orders items according to various rules; and filtering provides a
subset of items that match certain criteria. In all three cases, however, you don’t want such operations to
actually change the underlying data: a user might want to group, sort, or filter the same data in different
ways from moment to moment.
Grouping, sorting, and filtering, then, are thus referred to as projections of the data: they’re all
connected to the same underlying data such that a change to an item in the projection will be
propagated back to the source, just as changes in the source are reflected in the projection.
The WinJS.Binding.List object provides methods to create these projections: createGrouped,
createSorted, and createFiltered. Each method produces a special form of a WinJS.Binding.List:
GroupedSortedListProjection, SortedListProjection, and FilteredListProjection, respectively. That
is, each projection is a bindable list in itself, with a few extra methods and properties that are specific to
the projection. You can even create a projection from a projection. For instance,
createGrouped(...).createFiltered(...) will create a filtered projection on top of a grouped
projection. (Note, however, that the list’s sort method does not create a projection. It applies the
sorting in-place, just like the JavaScript array’s sort.)
Now that we know about projections, we can see how myGroupedList is created:
var myGroupedList = myList.createGrouped(getGroupKey, getGroupData, compareGroups);
187