WinJS : use the same data in the zoomed out and zoomed in view.

The Semantic zoom let you display your data in a zoomed out and zoomed in way. It’s really fine when your data is grouped but sometimes you need to display a non-grouped data just in a different way with a different template.

For example, we did it in the Larousse Illustré Windows 8 app to display media in a different way when zoomed in than zoomed out :

This is exactly the same data but shown in a different fashion. The user choose the one it prefers.

But, if you try to set the same data source to the both listview in your semantic zoom, your app will crash.

An exception is raised because a method “itemFromDescription” is not defined.

The solution to make everything works is to define this method as below :
[js]
var zoomedInListView = document.getElementById("zoomedInListView").winControl;
var zoomedOutListView = document.getElementById("zoomedOutListView").winControl;

zoomedInListView.itemDataSource = myList.dataSource;
zoomedInListView.itemDataSource.itemFromDescription
= function (it) { return WinJS.Promise.wrap({ index: 0 }); };

zoomedOutListView.itemDataSource = myList.dataSource;
zoomedOutListView.itemDataSource.itemFromDescription
= function (it) { return WinJS.Promise.wrap({ index: 0 }); };

[/js]

I hope this will help you 🙂

A sample is available (scenario 2) on my Dropbox.