[SOLVED] How can I add a wrapper on every two items in mustache loop?

How can I add a wrapper on every two items in mustache loop?

I am trying to get this outcome when looping through json in mustache

<div class="group">
    <article></article>
    <article></article>
</div>
<div class="group">
    <article></article>
    <article></article>
</div>

This is the only thing I know how to do

{{# books }}
    <article> ... </article>
{{/ books }}

ps - I'm using pattern lab

Solution

Maintainer of Pattern Lab Node here.

My suggestion is similar to O_Z's comment in that changing the data to utilize listitems.json might be a better bet.

You can read it all here: http://patternlab.io/docs/data-listitems.html

If you really want paired items like that, the gist would be having a template then like this:

{{# listItems.three}}
<div class="group">
    <article>...</article>
    <article>...</article>
</div>
{{/ listItems.three}}

where your listitems.json would correspond as:

{
  "1": {
    "articles" : [
       {...},
       {...}
    ]
  },
  "2": {
    "articles" : [
       {...},
       {...}
    ]
  },
  "3": {
    "articles" : [
       {...},
       {...}
    ]
  }
}

listitems.three has no link to the number of outputted articles, just the potential pook of data. With this approach, the order of itemization is actually randomized each build too.