1

我正在开发一个带有把手、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 文件中获取信息。

我不确定这是语法错误还是其他问题，但感谢您的帮助。

4

1 回答 1

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>
于 2017-05-23T14:07:25.327 回答