Looping Over a Single Pattern Multiple Times

There may be times when you want to use one pattern to represent repeatable content, like comments, but you don't want to have the same content show up multiple times. Rather than create different patterns with different examples of content to mimic "a reall comments section" you can, instead, combine partials with comment examples that you can store in source/_data/data.json.

Setting Up the Single Comment Pattern

The first thing we'll want to do is set-up the pattern that we're going to loop over. We're going to use a pattern called single-comment-data which is very similar to the default single-comment pattern found in molecules.

<div class="comment-container">
    <div class="comment-meta">
        <img src="{{ avatar }}" alt="{{ name.first }}'s Avatar" />
        <h4 class="comment-name"><a href="#">{{ name.first }} {{ name.last }}</a></h4>
    </div>
    <div class="comment-text">
        <p>{{ comment-text }}</p>
    </div>
</div>

Let's breakdown what's going on with this pattern. The mark-up itself should be self-explanatory. The items surrounded by curly braces (or mustaches), for example {{ description }} , are Mustache variables. They're the parts of the partial that will be replaced by the content from data.json.

This pattern should be saved as molecules/components/single-comment-data.mustache.

Important: A partial can include another partial. For example, if you had a common format for your avatar that you used across multiple patterns including the single-comment-data pattern you could include it with the PHP version of Pattern Lab's partial syntax.

Setting Up Our Comments

The Introduction to JSON & Mustache tutorial should provide a good reference for understanding how we're going to use the data. We're going to be expanding upon the "Nested Variables" example.

Since we want to have unique comments we need to add them all to a single container. In our data.json file we'd add the following:

"comments": [ ]

The brackets, [ ], denote that we're going to have a list of items that can be looped over. Let's add the three comments that we'd like to see in our example:

"comments": [
    {
        "avatar":  "../../images/fpo_avatar.png" ,
        "name":    { "first": "Dave", "last": "Olsen" },
        "comment-text": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."
    },
    {
        "avatar":  "../../images/fpo_avatar.png",
        "name":    { "first": "Brad", "last": "Frost" },
        "comment-text": "Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
    },
    {
        "avatar":  "../../images/fpo_avatar.png",
        "name":    { "first": "Han", "last": "Solo" },
        "comment-text": "A small river named Duden flows by their place and supplies it with the necessary regelialia."
    }
]

Each comment is separated from one another by curly braces { }. Within each comment are the keys, for example avatar, that match the Mustache variable names in our single-comment-data pattern. The values given to these keys, for example ../../images/fpo_avatar.png, are what will appear when our Mustache partial is rendered.

Setting Up the Multiple Comment Partial

Now we have to set-up the pattern that will combine our single-comment-data pattern with our data. It might look something like this:

<section class="comments section">
    <div class="comments-container" id="comments-container">
        <h2 class="section-title">Comment List</h2>
        <div class="comment-list">
            {{# comments }}
                {{> molecules-single-comment-data }} 
            {{/ comments }}
        </div>
    </div> 
</section>

This pattern should be saved as organisms/comments/comment-thread-data.mustache.

Again, the mark-up should be self-explanatory. What's important to note is how we reference the Mustache variable from data.json that we know has the unique content for each item. Rather than just using {{ comments }} we instead treat it sort of like an HTML tag. It has an open tag, {{# comments }}, and a closing tag, {{/ comments }}. Anything within those tags will be looped over the same number of times as the number of elements in our commentsvariable fromdata.json`. In our example we set-up three comments so the loop would run three times.

Because we're referencing a partial, {{> molecules-single-comment-data }}, within our loop it would get rendered three times.

Important: The only way to control how many items are shown via a loop like this is to modify the number of elements in our data source. Their is no way to have a comments variable from data.json with three elements but only show two comments on our page.

The Output

Combining the comment-thread-data organism, the single-comment-data partial, and the data from data.json would result in the following unique output giving us a better representation of what a comment thread on our website might look like:

<section class="comments section">
    <div class="comments-container" id="comments-container">
        <h2 class="section-title">Comment List</h2>
        <div class="comment-list">
            <div class="comment-container">
                <div class="comment-meta">
                    <img src="../../images/fpo_avatar.png" alt="Dave's Avatar" />
                    <h4 class="comment-name"><a href="#">Dave Olsen</a></h4>
                </div>
                <div class="comment-text">
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                </div>
            </div>
            <div class="comment-container">
                <div class="comment-meta">
                    <img src="../../images/fpo_avatar.png" alt="Brad's Avatar" />
                    <h4 class="comment-name"><a href="#">Brad Frost</a></h4>
                </div>
                <div class="comment-text">
                    <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
                </div>
            </div>
            <div class="comment-container">
                <div class="comment-meta">
                    <img src="../../images/fpo_avatar.png" alt="Han's Avatar" />
                    <h4 class="comment-name"><a href="#">Han Solo</a></h4>
                </div>
                <div class="comment-text">
                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                </div>
            </div>
        </div>
    </div> 
</section>