Handlebars Passing Data with Patternlab

Question

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.

Maintainer of Pattern Lab Node here - this might be a similar test case as https://github.com/pattern-lab/patternlab-node/issues/648 which indicates something wrong with list iteration in the Handlebars engine. Your use case is slightly more complicated and does not use listitems, however. If you remove the tabText patternParameter from within the include, what is the behavior? — Brian Muenzenmeyer, May 03 '17 at 08:44
Hey @BrianMuenzenmeyer , if I remove the tabText parameter I get the error `Error: The partial atoms-tab could not be found` and my local server crashes. I'm not sure if that is because this is what atoms-tab looks like: `
I'd expect the simpler case to work, unless that above cited issue pertains to your use case too. I was just trying to reduce complexity of the test. Perhaps you can open a new issue at https://github.com/pattern-lab/patternlab-node or chat with me at https://gitter.im/pattern-lab/node for faster communication. — Brian Muenzenmeyer, May 03 '17 at 18:16

score 1 · Answer 1 · answered May 18 '17 at 13:01

1

Try changing your include syntax to

{{> atoms-tab tabText="{{tabText}}" }}

As I (just recently) documented withing https://github.com/pattern-lab/patternlab-node/wiki/Working-with-PatternEngines you will notice that not all PatternEngines are created equal, with some language constructs from the default Mustache engine, like this one, completely obsoleted by the more powerful engine.

answered May 18 '17 at 13:01

Brian Muenzenmeyer

1,026
1
7
17

I figured out why it wasn't working with a handlebars extension but I'll definitely try that for my loop! Thanks! – caraclarke May 19 '17 at 13:49

score 0 · Accepted Answer · answered May 19 '17 at 13:49

0

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

"patternExtension": "handlebars"

answered May 19 '17 at 13:49

caraclarke

370
1
5
24

Handlebars Passing Data with Patternlab

2 Answers2