TITLE
DESCRIPTION
In this example, an instance of the Uize.Population class is being used to populate a node with a details view for a set of photos. The HTML that is used as the template, when populating the node with a photo record set, is the initial inner HTML of the node. The Uize.Population instance is configured with a value for its templateItem set-get property that maps record fields to specific substrings of the HTML template by example values, allowing the initial HTML contents of the populated node to be well-formed (something that cannot be guaranteed when using strictly a substitution token syntax).
The photo records do not contain a URL for the thumbnail, but only a title. So, in order to substitute the correct thumbnail URL into the HTML template when populating, a phantom property called thumbnailFilename is registered with the Uize.Population instance using the itemPhantomProperties set-get property. Similarly, in order to show the ratings for each record, a ratingStarsCrop phantom property is registered, and this is substituted into the correct place in the HTML in order to achieve crop rects for the rating stars HTML that would correctly reflect the rating value.
Finally, a category selector is provided to let you choose from category subselections of the complete photos record set (methods of the Uize.Data package come in handy here). Each time you select a new category, the items set-get property of the Uize.Population is updated. Updating this property automatically results in the population instance re-populating its container node to reflect its new data set.
Scroll down, as necessary, to get the full effect.