如何使用带有YAML前端物品的把手#each助手

Question

我正在使用assemble.io自动化我的前端开发，并希望使用YAML前端内容来创建一个简单的导航菜单。

我想要实现的HTML是：

<li><a href="#link1">Link1</a></li>
<li><a href="#link2">Link2</a></li>

我认为正确的把手标记是这样的：

      {{#each sublinks}}
      <li><a href="#{{section}}">{{section}}</li>
      {{/each}}

但是什么是正确的YFM？我已经开始使用它，但知道语法不正确：

---
sublinks:
  - section: link1, link2
---

Answer 1

对于这样的模板：

{{#each sublinks}}
<li><a href="#{{section}}">{{section}}</li>
{{/each}}

您需要这样的数据结构：

sublinks = [
    { section: 'link1' },
    { section: 'link2' },
    //...
]

在YAML中，看起来像是：

sublinks:
  - section: link1
  - section: link2

你也应该能够使用这个YAML：

sublinks:
  - link1
  - link2

使用此模板：

{{#each sublinks}}
<li><a href="#{{.}}">{{.}}</li>
{{/each}}

---

您的YAML对应于这样的数据结构：

sublinks = [
    { section: 'link1, link2' }
]

除非您想使用Handlebars帮助器拆分'link1, link2'字符串，否则这并不是非常有用。

Answer 2

添加@ mu＆＃39答案很棒，你也可以这样做：

鉴于此YAML前言：

---
sublinks:
  - href: link/to/foo
    text: Foo Text
  - href: link/to/bar
    text: Bar Text
  - href: link/to/baz
    text: Baz Text
---

您的模板如下所示：

{{#each sublinks}}
  <li><a href="#{{href}}">{{text}}</a></li>
{{/each}}

请注意，YAML规范还允许使用更像JavaScript对象的语法：

---
sublinks:
  - {href: link/to/foo, text: Foo Text}
  - {href: link/to/bar, text: Bar Text}
  - {href: link/to/baz, text: Baz Text}
---