MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

markSupportForProcessing. Note that if you assign a function to an itemTemplate or
groupHeaderTemplate property in JavaScript, it doesn’t need the mark.
In its basic form, a template function receives an item promise as its first argument and returns a
promise whose completed handler creates the elements for that item. Huh? Yeah, that confuses me too!
So let’s look at the basic structure in terms of two functions:
function basicRenderer(itemPromise) {
return itemPromise.then(buildElement);
};
function buildElement (item) {
var result = document.createElement("div");
}
//Build up the item, typically using innerHTML
return result;
The renderer is the first function above. It simply says, “When itemPromise is fulfilled, meaning the
item is available, call the buildElement function with that item.” By returning the promise from
itemPromise.then (not done, mind you!), we allow the collection control that’s using this renderer to
chain the item promise and the element-building promise together. This is especially helpful when the
item data is coming from a service or other potentially slow feed, and it’s very helpful with incremental
page loading because it allows the control to cancel the promise chain if the page is scrolled away
before those operations complete. In short, it’s a good idea!
Just to show it, here’s how we’d make a renderer directly usable from markup, as in
data-win-options = "{itemTemplate: Renderers.basic }":
WinJS.Namespace.define("Renderers", {
basic: WinJS.Utilities.markSupportedForProcessing(function (itemPromise) {
return itemPromise.then(buildElement);
})
}
It’s also common to just place the contents of a function like buildElement directly within the
renderer itself, resulting in a more concise expression of the exact same structure:
function basicRenderer(itemPromise) {
return itemPromise.then(function (item) {
var result = document.createElement("div");
//Build up the item, typically using innerHTML
};
})
return result;
208