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:
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.
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.
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.
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.
In SelectItem function you will have to fetch the value of selected item and set
as value of HTML element of output div.
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.
I hope this article is useful. Thanks for reading.