As the amount of data organisations store explodes we need easier more intuitive ways to navigate the mass of data. The IMDb claims to have over 2 million titles in their database and Wikipedia has a lot of films listed. So I think we are all good for a large enough dataset for our sample app.
Lets start by creating a new project using the Navigation App template.
Here is the hardcoded data we are going to use:
(release dates are not accurate)
The final file should look like this:
The container is a simple unordered list:
- <ul id=”movieList”>
Browse the complete code here.
Upgrading to Data Binding
Take note of the id for the WinJS template, movieListTemplate, as we will be using it in the ListView control.
Then we change our ordered list, in home.html, to the WinJS ListView control:
Line three has quite a lot going on. The data source used in line 3 still needs to be created its as simple as adding the following to data.js:
- var moviesList = new WinJS.Binding.List(moviesArray);
Also in line three is the special syntax that can be used to declaratively select a template to use with the control
- itemTemplate: select('#movieListTemplate')
The complete code of this change can be viewed here.
More posts in this series to follow.