Imagine that you want to display a list of products using
the WinJS ListView control. Imagine, furthermore, that you want to use different templates to display different products. In particular, when a product is on sale, you want to display
the product using a special “On Sale” template.
In this blog entry, I explain how you can switch templates dynamically when displaying items with a ListView control. In other words, you learn how to use more than one template when displaying items with a ListView control.
Creating
the Data Source
Let’s start by creating
the data source for
the ListView. Nothing special here – our data source is a list of products. Two of
the products, Oranges and Apples, are on sale.
(function () {
"use strict";
var products = new WinJS.Binding.List([
{ name: "Milk", price: 2.44 },
{ name: "Oranges", price: 1.99, onSale: true },
{ name: "Wine", price: 8.55 },
{ name: "Apples", price: 2.44, onSale: true },
{ name: "Steak", price: 1.99 },
{ name: "Eggs", price: 2.44 },
{ name: "Mushrooms", price: 1.99 },
{ name: "Yogurt", price: 2.44 },
{ name: "Soup", price: 1.99 },
{ name: "Cereal", price: 2.44 },
{ name: "Pepsi", price: 1.99 }
]);
WinJS.Namespace.define("ListViewDemos", {
products: products
});
})();
The file above is saved with
the name products.js and referenced by
the default.html page described below.
Declaring
the Templates and ListView Control
Next, we need to declare
the ListView control and
the two Template
controls which we will use to display template items.
The markup below appears in
the default.html file:
<!-- Templates -->
<div id="productItemTemplate" data-win-control="WinJS.Binding.Template">
<div class="product">
<span data-win-bind="innerText:name"></span>
<span data-win-bind="innerText:price"></span>
</div>
</div>
<div id="productOnSaleTemplate" data-win-control="WinJS.Binding.Template">
<div class="product onSale">
<span data-win-bind="innerText:name"></span>
<span data-win-bind="innerText:price"></span>
(On Sale!)
</div>
</div>
<!-- ListView -->
<div id="productsListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: ListViewDemos.products.dataSource,
layout: { type: WinJS.UI.ListLayout }
}">
</div>
In
the markup above, two Template
controls are declared.
The first template is used when rendering a normal product and
the second template is used when rendering a product which is on sale.
The second template, unlike
the first template, includes
the text “(On Sale!)”.
The ListView control is bound to
the data source which we created in
the previous section.
The ListView itemDataSource property is set to
the value ListViewDemos.products.dataSource. Notice that we do not set
the ListView itemTemplate property. We set this property in
the default.js file.
Switching Between Templates
All of
the magic happens in
the default.js file.
The default.js file contains
the JavaScript code used to switch templates dynamically.
Here’s
the entire contents of
the default.js file:
(function () {
"use strict";
var app = WinJS.Application;
app.onactivated = function (eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
WinJS.UI.processAll().then(function () {
var productsListView = document.getElementById("productsListView");
productsListView.winControl.itemTemplate = itemTemplateFunction;
});;
}
};
function itemTemplateFunction(itemPromise) {
return itemPromise.then(function (item) {
// Select either normal product template or on sale template
var itemTemplate = document.getElementById("productItemTemplate");
if (item.data.onSale) {
itemTemplate = document.getElementById("productOnSaleTemplate");
};
// Render selected template to DIV container
var container = document.createElement("div");
itemTemplate.winControl.render(item.data, container);
return container;
});
}
app.start();
})();
In
the code above, a function is assigned to
the ListView itemTemplate property with
the following line of code:
productsListView.winControl.itemTemplate = itemTemplateFunction;
The itemTemplateFunction returns a DOM element which is used for
the template item. Depending on
the value of
the product onSale property,
the DOM element is generated from either
the productItemTemplate or
the productOnSaleTemplate template.
Using Binding Converters instead of Multiple Templates
In
the previous sections, I explained how you can use different templates to render normal products and on sale products. There is an alternative approach to displaying different markup for normal products and on sale products. Instead of creating two templates, you can create a single template which contains separate DIV elements for a normal product and an on sale product.
The following default.html file contains a single item template and a ListView control bound to
the template.
<!-- Template -->
<div id="productItemTemplate" data-win-control="WinJS.Binding.Template">
<div class="product" data-win-bind="style.display: onSale ListViewDemos.displayNormalProduct">
<span data-win-bind="innerText:name"></span>
<span data-win-bind="innerText:price"></span>
</div>
<div class="product onSale" data-win-bind="style.display: onSale ListViewDemos.displayOnSaleProduct">
<span data-win-bind="innerText:name"></span>
<span data-win-bind="innerText:price"></span>
(On Sale!)
</div>
</div>
<!-- ListView -->
<div id="productsListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{
itemDataSource: ListViewDemos.products.dataSource,
itemTemplate: select('#productItemTemplate'),
layout: { type: WinJS.UI.ListLayout }
}">
</div>
The first DIV element is used to render a normal product:
<div class="product" data-win-bind="style.display: onSale ListViewDemos.displayNormalProduct">
<span data-win-bind="innerText:name"></span>
<span data-win-bind="innerText:price"></span>
</div>
The second DIV element is used to render an “on sale” product:
<div class="product onSale" data-win-bind="style.display: onSale ListViewDemos.displayOnSaleProduct">
<span data-win-bind="innerText:name"></span>
<span data-win-bind="innerText:price"></span>
(On Sale!)
</div>
Notice that both templates include a data-win-bind attribute. These data-win-bind attributes are used to show
the “normal” template when a product is not on sale and show
the “on sale” template when a product is on sale. These attributes set
the Cascading Style Sheet display attribute to either “none” or “block”.
The data-win-bind attributes take advantage of binding converters.
The binding converters are defined in
the default.js file:
(function () {
"use strict";
var app = WinJS.Application;
app.onactivated = function (eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
WinJS.UI.processAll();
}
};
WinJS.Namespace.define("ListViewDemos", {
displayNormalProduct: WinJS.Binding.converter(function (onSale) {
return onSale ? "none" : "block";
}),
displayOnSaleProduct: WinJS.Binding.converter(function (onSale) {
return onSale ? "block" : "none";
})
});
app.start();
})();
The ListViewDemos.displayNormalProduct binding converter converts
the value true or false to
the value “none” or “block”.
The ListViewDemos.displayOnSaleProduct binding converter does
the opposite; it converts
the value true or false to
the value “block” or “none” (Sadly, you cannot simply place a NOT operator before
the onSale property in
the binding expression – you need to create both converters).
The end result is that you can display different markup depending on
the value of
the product onSale property. Either
the contents of
the first or second DIV element are displayed:
Summary
In this blog entry, I’ve explored two approaches to displaying different markup in a ListView depending on
the value of a data item property.
The bulk of this blog entry was devoted to explaining how you can assign a function to
the ListView itemTemplate property which returns different templates. We created both a productItemTemplate and productOnSaleTemplate and displayed both templates with
the same ListView control.
We also discussed how you can create a single template and display different markup by using binding converters.
The binding converters are used to set a DIV element’s display property to either “none” or “block”. We created a binding converter which displays normal products and a binding converter which displays “on sale” products.
