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

Получается, что я неправильно использовал параметры шаблона (согласно Брайану 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>