In this article we will see:
- Working with ListView control in WinJS
- ItemTemplte in WinJS
- Data Binding to ListView
- Creating Data Source in WinJS
For the purpose of this article I am going to bind the
name and some images of an Indian cricket player in a ListView. After data binding the
ListView should look like below:
![image1.png]()
To bind data to a ListView you need to follow certain steps.
- Create a Data Source
- Create ItemTemplate and bind data source
properties to HTML elements of ItemTemplate
- Create ListView and attach ItemTemplate to
ListView
- Set the DataSource of ListView
Create Data Source
Let us create data to bind to the List View. I have given the name of the array
PlayerData. This contains two objects Name and Photo.
var
PlayerData
=
[
{
Name:
'Sachin Tendulkar',
Photo:
'images/ST.jpg'
},
{
Name:
'Mahender Singh Dhoni',
Photo:
'images/MSD.jpg'
},
{
Name:
'Saurabh Ganguli',
Photo:
'images/SG.jpg'
},
{
Name:
'Harbhajan Singh',
Photo:
'images/HS.jpg'
},
{
Name:
'Youvrah Singh',
Photo:
'images/YS.jpg'
},
{
Name:
'VVS Laxman',
Photo:
'images/VVS.jpg'
},
{
Name:
'Virendar Shewag',
Photo:
'images/VS.jpg'
},
{
Name:
'Zaheer Khan',
Photo:
'images/ZK.jpg'
},
{
Name:
'Sachin Tendulkar',
Photo:
'images/ST.jpg'
},
{
Name:
'Mahender Singh Dhoni',
Photo:
'images/MSD.jpg'
},
{
Name:
'Saurabh Ganguli',
Photo:
'images/SG.jpg'
},
{
Name:
'Harbhajan Singh',
Photo:
'images/HS.jpg'
},
{
Name:
'Youvrah Singh',
Photo:
'images/YS.jpg'
},
{
Name:
'VVS Laxman',
Photo:
'images/VVS.jpg'
},
{
Name:
'Virendar Shewag',
Photo:
'images/VS.jpg'
},
{
Name:
'Zaheer Khan',
Photo:
'images/ZK.jpg'
}
];
To create the Data Source, I have put all the images of the players in the image folder. In
real-world applications, data must be downloaded from the Service.
Create Item Template
We need to create ItemTemplate to bind with the ListView. There are a few points
you need to keep in mind while creating ItemTemplate:
-
ItemTemplate is a div
-
To convert the div to an
ItemTemplate div we need to have attribute data-win-control set to
WinJS.Binding.Template
-
Other HTML elements
should be inside the template div tag.
-
Data-win-bind is used to
bind data to HTML elements.
In the following I am using one div to bind the name of the player and image to bind image of
the player.
![image2.png]()
Create ListView
Data has been created. ItemTemplate has been created. Next you need to create
ListView and bind ItemTemplate to that ListView.
-
ListView is a div
-
data-win-control property
of div should be set to WinJS.UI.ListView
-
data-win-options take
complex values.
-
Value of itemRenderer
should be set to id of the div created as ItemTemplate. In our case id of
ItemTemplate div is playeritemtemplate. So value of itemRenderer should be
playeritemtemplate.
-
Layout should be set.
-
Value of maximum rows can
be set.
In the following you can find, I have created ListView and bound it to the ItemTemplate.
![image3.png]()
Putting it all together, the HTML should be as below. I have put an output div. Selected
value from the ListView will be displayed in output div.
Default.html
<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8"
/>
<title>DataBindingPlayer</title>
<!-- WinJS references -->
<link
rel="stylesheet"
href="/winjs/css/ui-dark.css"
/>
<script
src="/winjs/js/base.js"></script>
<script
src="/winjs/js/ui.js"></script>
<script
src="/winjs/js/binding.js"></script>
<script
src="/winjs/js/controls.js"></script>
<script
src="/winjs/js/animations.js"></script>
<script
src="/winjs/js/uicollections.js"></script>
<script
src="/winjs/js/wwaapp.js"></script>
<!-- DataBindingPlayer references -->
<link
rel="stylesheet"
href="/css/default.css"
/>
<script
src="/js/default.js"></script>
</head>
<body>
<h2>Indian
Team</h2>
<br
/>
<div
id="playeritemtemplate"
data-win-control="WinJS.Binding.Template">
<div
data-win-bind="innerText:Name"
style="height:20px;">
</div>
<img
data-win-bind="src:Photo"
style="width:200px;height:150px;"
/>
</div>
<div
id="PlayerListView"
data-win-control="WinJS.UI.ListView"
style="height:185px;"
data-win-options="{itemRenderer:playeritemtemplate,layout:{type:WinJS.UI.GridLayout,maxRows:1}}"
>
</div>
<br
/>
<div
id="ouputDiv"
>
<span>You
Selected
</span>
<span
id="selectedPlayer"
style="height:20px;"
></span>
<br
/>
<img
id="selectedPlayerImg"
style="width:200px;height:150px;"/>
</div>
</body>
</html>
Binding Data Source to
ListView
To bind the ListView with a data source, first you need to fetch the ListView div and then
simply set the datasource value. In the following I am fetching ListView div and then setting
data source value to PlayerData. If you remember, I created PlayerData as data
source in the beginning of this article.
![image4.png]()
Attaching event to ListView
As of now you have created a ListView and bound a data source to that. Next you may
want to fetch the selected item. For that you need to attach an iteminvoked event
to the ListView. You can add that as below. In the following, SelectItem is a function
and it will get called on the item selection.
![image5.png]()
In SelectItem function you will have to fetch the value of selected item and set
as value of HTML element of output div.
![image6.png]()
Putting it all together, the js file will have the codes shown below:
Default.js
(function
()
{
'use strict';
// Uncomment the following line to enable first chance
exceptions.
// Debug.enableFirstChanceException(true);
var
PlayerData
=
[
{
Name:
'Sachin Tendulkar',
Photo:
'images/ST.jpg'
},
{
Name:
'Mahender Singh Dhoni',
Photo:
'images/MSD.jpg'
},
{
Name:
'Saurabh Ganguli',
Photo:
'images/SG.jpg'
},
{
Name:
'Harbhajan Singh',
Photo:
'images/HS.jpg'
},
{
Name:
'Youvrah Singh',
Photo:
'images/YS.jpg'
},
{
Name:
'VVS Laxman',
Photo:
'images/VVS.jpg'
},
{
Name:
'Virendar Shewag',
Photo:
'images/VS.jpg'
},
{
Name:
'Zaheer Khan',
Photo:
'images/ZK.jpg'
},
{
Name:
'Sachin Tendulkar',
Photo:
'images/ST.jpg'
},
{
Name:
'Mahender Singh Dhoni',
Photo:
'images/MSD.jpg'
},
{
Name:
'Saurabh Ganguli',
Photo:
'images/SG.jpg'
},
{
Name:
'Harbhajan Singh',
Photo:
'images/HS.jpg'
},
{
Name:
'Youvrah Singh',
Photo:
'images/YS.jpg'
},
{
Name:
'VVS Laxman',
Photo:
'images/VVS.jpg'
},
{
Name:
'Virendar Shewag',
Photo:
'images/VS.jpg'
},
{
Name:
'Zaheer Khan',
Photo:
'images/ZK.jpg'
}
];
WinJS.Application.onmainwindowactivated
=
function
(e)
{
if
(e.detail.kind
===
Windows.ApplicationModel.Activation.ActivationKind.launch)
{
WinJS.UI.processAll().then(function
()
{
var
PlayerList
=
document.getElementById('PlayerListView').winControl;
PlayerList.dataSource
=
PlayerData;
PlayerList.addEventListener('iteminvoked',
SelectItem);
});
}
}
function
SelectItem(e)
{
var
selectedItem
=
PlayerData[e.detail.itemIndex];
var
selecteplayer
=
document.getElementById('selectedPlayer');
selecteplayer.innerText
=
selectedItem.Name;
var
selecteplayerImg
=
document.getElementById('selectedPlayerImg');
selecteplayerImg.src
=
selectedItem.Photo;
}
WinJS.Application.start();
})();
On running you should get a
ListView bound with the player's name and image.
![image7.png]()
I hope this article is useful. Thanks for reading.