Creating Lists with Pattern Lab's Default `listItems` Variable

Many more complicated patterns may include lists of objects. For example, comments or headlines. The PHP version of Pattern Lab comes with a simple way to fill out these lists with dynamic data so that you can quickly stub them out. The list data can be found in source/data/listitems.json and is accessed in Mustache with the listItems key. Lists are randomized each time the Pattern Lab website is generated. Let's look at a simple example of iterating over a list. In your template you might have:

<ul>
{{# listItems.four }}
    <li> {{ title }} </li>
{{/ listItems.four }}
</ul>

Let's break this down before showing the results. The # denotes that Mustache needs to loop over the given key that contains multiple values, in this case listItems.four, and write-out the corresponding value {{ title }}. The / denotes the end of the block that's being rendered. The PHP version of Pattern Lab supports the keys one through ten. If you need more than ten items for a given list you'll need to add your own data. Important: the keys one through ten are Pattern Lab-specific and not a general feature of Mustache.

The above would compile to:

<ul>
    <li> Rebel Mission to Ord Mantell</li>
    <li> Help, help, I'm being repressed!</li>
    <li> Bacon ipsum dolor sit amet turducken strip steak beef ribs shank</li>
    <li> Nullizzle shizznit velizzle, hizzle, suscipit own yo', gravida vizzle, arcu.</li>
</ul>

If you wanted six items in your list you'd write:

<ul>
{{# listItems.six }}
    <li> {{ title }} </li>
{{/ listItems.six }}
</ul>

The list text attributes were built using several lorem ipsum generators. The image attributes utilize placeimg.com. The available attributes are:

title
description
link
img.avatar
img.square
img.rectangle

The aspect ratio for img.rectangle is 4x3. Hopefully this gives pattern developers an easy way to build out dynamic lists for testing.