How to bind data to the WinJs Listview using Template

Goal: Binding  data to the  Winjs Listview using Template.

ListView: Winjs Listview need an item template that contains the markup you want to use to display each list item.

There are two ways to create a template we can use markup to define a WinJs.Binding.Template or we can create a templating function.

WinJS.Binding.Template is easy to create we define the markup that we want to use to display each list item.
Following are the steps we need to do:

Step I:

Lets  first create  WinJS.Binding.Template in our default.html. Here in this example we need to display the user profile  details.
so following is the code snipet for Template 

step II: Now lets create our data source in default.js. Here we are creating an array  of object and each object is having two properties  as title and image.we are

using this array to create a list of object.

var userArray = [ { title: " James Brito", picture: "images/JamesBrito.png" },
 { title: "Alex", picture: "images/alex.png" },
 { title: "Aleph", picture: "images/Aleph.png" },   
                     
 { title: "Richard", picture: "images/Richard.png" },   
                             
{ title: "John", picture: "images/john.png" },      
                          
{ title: "David", picture: "images/David.png" },     
                           
 { title: "Morkel", picture: "images/Morkel.png" },  
                              
 { title: "Sheldon", picture: "images/sheldon.png" },  
 { title: "Joseph", picture: "images/Joseph.png" }    
                                           ];       
      var userList = new WinJS.Binding.List(userArray);
 
               now we will set the ListView control's itemDataSource property.
 
               if (document.getElementById("UserListView"))      
           document.getElementById("UserListView").winControl.itemDataSource = userList.dataSource;