Patternlab Handlebars passing data variable as string literal

Question

I am working on a project with handlebars, patternlab-node and gulp. Right now my .hbs files are not working if I try to pass arguments to an atom partial. I've listed an example below.

The molecule:

<div class="filter-group {{ filterGroupClass }}">
  {{#each filterGroupContent}}
    {{> atoms-filter filterClass="{{filterClass}}" filterText="{{filterText}}" filterValue="{{filterValue}}" }}
  {{/each}}
</div>

The data:

{
  "filterGroupClass": "test-class",
  "filterGroupContent": [
    {
      "filterClass": "",
      "filterText": "Text",
      "filterValue": "9"
    },
    {
      "filterClass": "closed",
      "filterText": "Text2",
      "filterValue": "9"
    }
  ]
}

The atom:

<span class="unit">
  <a class="filter {{filterClass}}" href="">{{filterText}}
    <span class="value">{{filterValue}}</span>
  </a>
  <a class="pill-filter-close" href="">Close</a>
</span>

The output right now is showing with the text as: {{filterText}} {{filterValue}} instead of the text from the json data. But it is displaying the correct number of times from the loop so I believe it is getting information from the json file.

I'm not sure if this is a syntax error or different problem but any help is appreciated.

Answer 1

So turns out I was using pattern parameters incorrectly (according to Brian aka @bmuenzenmeyer who helped me in the patternlab gitter ), parameters should be thought of like !important. Data can be passed by default to nested children so when I renamed the keys in my json file it worked correctly.

Updated json below:

{
  "filterGroupClass": "group-div-class",
  "filterGroupContent": [
    {
      "filterClass": "",
      "filterText": "Text",
      "filterValue": "9"
    },
    {
      "filterClass": "",
      "filterText": "Text2",
      "filterValue": "9"
    }
  ]
}

since you can see from my question the key names are what the atom is expecting as variable values this allowed the parameters to be passed automatically with my molecule template set up as shown below.

<div class="filter-group {{ filterGroupClass }}">
  {{#each filterGroupContent}}
    {{> atoms-filter }}
  {{/each}}
</div>