Patternlab Handlebars 将数据变量作为字符串文字传递

Question

我正在开发一个带有车把、patternlab-node 和 gulp 的项目。现在，如果我尝试将参数传递给原子部分，我的 .hbs 文件将无法工作。我在下面列出了一个示例。

分子：

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

数据：

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

原子：

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

现在的输出显示文本为：{{filterText}} {{filterValue}} 而不是 json 数据中的文本。但它从循环中显示了正确的次数，所以我相信它正在从 json 文件中获取信息。

我不确定这是语法错误还是其他问题，但欢迎提供帮助。

Answer 1

结果证明我错误地使用了模式参数（根据在 patternlab gitter 中帮助我的 Brian aka @bmuenzenmeyer 的说法），参数应该被认为是 !important。默认情况下，数据可以传递给嵌套子项，因此当我重命名 json 文件中的键时，它可以正常工作。

已更新 json 下面：

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

因为你可以从我的问题中看到键名是原子期望的变量值，这允许参数通过我的分子模板设置自动传递，如下所示。

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

Patternlab Handlebars 将数据变量作为字符串文字传递

Patternlab Handlebars passing data variable as string literal

javascript

handlebars.js

patternlab.io