javascriptgulphandlebars.jspatternlab.ioatomic-design

Handlebars Passing Data with Patternlab

I am using Patternlab, Handlebars and Gulp as a prototyping tool. Currently I have an organism that is trying to pass data to an atom in a loop. I am getting the following error.

Error: Parse error on line 12:
...bLabels}}      {{> atoms-tab(tabText: "
----------------------^
Expecting 'OPEN_SEXPR', 'ID', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', got 'INVALID'

My code is below:

<nav class="tabbed-nav {{tabMenuClass}}">
  <ul>
    {{#each tabLabels}}
      {{> atoms-tab(tabText: {{tabText}})}}
    {{/each}}
  </ul>
</nav>

and the JSON: 

{
  "tabLabels": [
    {
      "tabText": "Tab 1",
      "tabClass": "",
      "disabledState": ""
    },
    {
      "tabText": "Tab 2",
      "tabClass": "",
      "disabledState": ""
    },
    {
      "tabText": "Tab 3 Open",
      "tabClass": "tab-open",
      "disabledState": ""
    }
  ]
}

I've seen examples in other questions like here where loops are nested so I'm not sure what is different/incorrect about my code.

Solution

  • Turns out the problem was in my patternlab-config.json. I didn't change the patternExtension option as shown below.

    "patternExtension": "handlebars"