使用 Patternlab 传递数据的车把

Question

我正在使用 Patternlab、Handlebars 和 Gulp 作为原型制作工具。目前我有一个有机体试图将数据传递给循环中的原子。我收到以下错误。

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

我的代码如下：

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

和JSON：

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

我在其他问题中看到过嵌套循环的例子，所以我不确定我的代码 different/incorrect 是什么。

Answer 1

尝试将包含语法更改为

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

正如我（最近）在 https://github.com/pattern-lab/patternlab-node/wiki/Working-with-PatternEngines 中记录的那样，您会注意到并非所有的 PatternEngine 都是平等创建的，默认的 Mustache 引擎中的一些语言结构，就像这个一样，完全被更强大的引擎所淘汰.

Answer 2

原来问题出在我的 patternlab-config.json 上。我没有更改 patternExtension 选项，如下所示。

"patternExtension": "handlebars"

使用 Patternlab 传递数据的车把

Handlebars Passing Data with Patternlab

javascript

handlebars.js

gulp

patternlab.io

atomic-design