Layouts and Tiles - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 69

<text id="4"></text>
</binding>
<binding template="TileWideBlockAndText01">
<text id="1">Apples (Whole Foods)</text>
<text id="2">Hotdogs (Costco)</text>
<text id="3">Soda (Costco)</text>
<text id="4"></text>
<text id="5">2</text>
<text id="6">Stores</text>
</binding>
</visual>
</tile>
There is no convenient API for combining templates. The approach I have taken is to use
the XML handling support to populate the templates separately and then combine them at the
end of the process, which you can see in Listing 4-8.
Listing 4-8. Producing a Single Update for Square and Wide Tiles
…
WinJS.Namespace.define("Tiles", {
sendTileUpdate: function () {
var storeCounter = { count: 0 };
ViewModel.UserData.getItems().forEach(function (listItem) {
if (!storeCounter[listItem.store]) {
storeCounter[listItem.store] = true;
storeCounter.count++;
}
});
var tn = Windows.UI.Notifications;
var squareXmlFragment = tn.TileUpdateManager
.getTemplateContent(tn.TileTemplateType.tileSquareText03);
var wideXmlFragment = tn.TileUpdateManager
.getTemplateContent(tn.TileTemplateType.tileWideBlockAndText01);
var squareTextNodes = squareXmlFragment.getElementsByTagName("text");
var wideTextNodes = wideXmlFragment.getElementsByTagName("text");
var items = ViewModel.UserData.getItems();
for (var i = 0; i < squareTextNodes.length; i++) {
var listItem = items.getAt(i);
if (listItem) {
squareTextNodes[i].innerText = listItem.item;
wideTextNodes[i].innerText = listItem.item + " (" + listItem.store + ")";
}
}
wideTextNodes[4].innerText = storeCounter.count;
wideTextNodes[5].innerText = "Stores";
var wideBindingElement = wideXmlFragment.getElementsByTagName("binding")[0];
var importedNode = squareXmlFragment.importNode(wideBindingElement, true);