HTML and CSS Reference
In-Depth Information
function (clip) { return { category: clip.category } }
);
Both functions are called on each item in the bound list. The first function returns the expression
to group items on. In this case, you group video clips on category. In other cases, it could have been
the initial of contact names or a combination of multiple properties. The second function just returns
a literal JavaScript object with the information you intend to display in the master view. It could be
the whole
Clip
object; in this case, you may use a simpler object that just includes the category. This
means that in the zoomed-out master view, the only information available is the category name.
Binding data for semantic zoom
Binding data to the
SemanticZoom
component and its child
ListView
components requires a few lines
of code. You add the following at the end of the
VideosApp.init
function in
videos.js
:
var detailView = document.getElementById("listview-in").winControl;
detailView.itemDataSource = videosListGrouped.dataSource;
detailView.groupDataSource = videosListGrouped.groups.dataSource;
detailView.itemTemplate = document.getElementById("zoomed-in-template");
detailView.groupHeaderTemplate = document.getElementById("header-template");
var masterView = document.getElementById("listview-out").winControl;
masterView.itemDataSource = videosListGrouped.groups.dataSource;
masterView.itemTemplate = document.getElementById("zoomed-out-template");
Note that you need to bind data twice to the details view. First you provide the plain list of items
and then the list of calculated groups. For optimal results, the details view needs an item template
and a header template. The master view just needs the list of bound items and an item template.
Before you can have a first look at the work, go back to
default.html
and add a few templates to
the markup.
<!-- Template for the group headers in the zoomed-in details view -->
<div id="header-template" data-win-control="WinJS.Binding.Template">
<div class="header-title">
<h1 data-win-bind="innerText: category"></h1>
</div>
</div>
<!-- Template for the zoomed-in details view -->
<div id="zoomed-in-template" data-win-control="WinJS.Binding.Template">
<div class="zoomed-in-item-container">
<img src="#" data-win-bind="src: posterUrl" />
<div>
<h3 data-win-bind="innerText: category"></h3>
<h6 data-win-bind="innerText: title"></h6>
Search WWH ::
Custom Search