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

Question

我正在开发一个带有 Handlebars 、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>