In this example, an instance of the Uize.Widget.Population class is being used to populate a node with a details view for a set of photos. The HTML used as the template for populating the node with a photo record set is the initial inner HTML of the node. The Uize.Widget.Population instance is configured with a value for its templateItem state 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 thumbnailUrl is declared with the Uize.Widget.Population instance using the itemPhantomProperties state property. Similarly, in order to show the ratings for each record, a ratingStarsCrop phantom property is declared, 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.Util package come in handy here). Each time you select a new category, the items state property of the Uize.Widget.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.