如何将参数传递给 Handlebars 中的嵌套子项

Question

我需要你的帮助来解决 Handlebars 组件的问题。

我有一个嵌套组件需要从其父级接收参数，但我不知道如何实现。

我的父组件json数据

{
  "_template": "SocialBar.hbs",
  "isSocialNameShown": true,
  "items": [
    {
      "_template": "/social/SocialLink.hbs",
      "href": "https://www.facebook.com/",
      "socialService": "facebook"
    },
    {
      "_template": "/social/SocialLink.hbs",
      "href": "https://twitter.com/",
      "socialService": "twitter"
    },
    {
      "_template": "/social/SocialLink.hbs",
      "href": "https://www.linkedin.com/",
      "socialService": "linkedin"
    }
  ]
}

模板文件

<div class="SocialBar">
    {{#with items}}
        <ul class="SocialBar-items">
            {{#each this}}
                <li class="SocialBar-items-item">{{this}}</li>
            {{/each}}
        </ul>
    {{/with}}
</div>

嵌套组件

<a class="SocialLink" href="{{href}}">
    <svg>
        <use xlink:href="#mono-icon-{{socialService}}"></use>
    </svg>
    {{#if isSocialNameShown}}
        <span class="sr-only">{{socialService}}</span>
    {{/if}}
</a>

但在子组件中 isSocialNameShown 未定义。如果我直接在每个项目中传递它，它可以工作，但我需要从父参数中获取它

"items": [
    {
      "_template": "/social/SocialLink.hbs",
      "href": "https://www.facebook.com/",
      "socialService": "facebook",
      "isSocialNameShown": true
    },
]

我在每个项目中尝试了类似 "isSocialNameShown": "{{isSocialNameShown}}" 的内容，但我不知道该怎么做。

有人能帮帮我吗？

感谢您的帮助。

Answer 1

我找到了如何将参数传递给 Brightspot CMS 中的子组件。有叫 set 和 get 的帮手可以做到这一点。

示例：

{{#set lastName="Forkbeard"}}
    {{include "Child.hbs"}}
{{/set}}

鉴于set的上述用法，该值可在Child.hbs中使用如下：

"Sweyn {{get "lastName"}}" equals "Sweyn Forkbeard".

如何将参数传递给 Handlebars 中的嵌套子项

How to pass params to nested child in Handlebars

handlebars.js