以模式传递 JSON 数据 |模式实验室

Question

我想包含一个原子模式并想从下面的 JSON 数组传递数据是代码和 JSON 文件。

主播-link.mustache

<a href="{{ url }}" class="{{ class }}">{{ label }}</a>

页脚-nav.mustache

<ul class="menu vertical">
{{# footerNav }}
    <li>{{> atoms-anchor-link(url:url, label : label, class : class) }}</li>
{{/ footerNav }}
</ul>

JSON 我想填充锚胡须的地方

{
    "footerNav": [{
        "label": "Shop",
        "url": "#",
        "class": "body-copy"
    }, {
        "label": "Pods",
        "url": "#",
        "class": "all-caps-large"
    }]
}

输出

<ul class="menu vertical">
    <li><a href="" class=""></a>
</li>
    <li><a href="" class=""></a>
</li>
</ul>

Pattern Lab 正在生成正确的 HTML 并创建锚点，但没有值填充到锚点中。

提前致谢！！！

Answer 1

你在这里调用了错误的模式。

<li>{{> atoms-anchor-link(url:url, label : label, class : class) }}</li>

正确的模式是。

<li>{{> atoms-anchor-link}}</li>

这会起作用。

以模式传递 JSON 数据 |模式实验室

Passing JSON data in pattern | PatternLab

javascript

mustache

patternlab.io