handlebars.js - 使用基于属性的 Handlebars 向元素添加类

Question

我使用 Handlebars #each 通过具有给定 bool 属性的对象循环，例如:

elements: [
  {
    text: "a"
    active: true
  },
  {
    text: "b"
    active: false
  }
]

根据该属性将类添加到 html 元素的最简单方法是什么？像这样的东西:

{{#each elements}}
  <article class={{if active 'active-class'}}>
  ...
{{/each}}

我正在使用 Handlebars 4.0.6

Answer 1

您需要先开通 helper block :

{{#if}}

然后，添加要检查的参数(在本例中为 bool 值):

{{#if active}}

然后，您像这样关闭它:

{{#if active}}{{/if}}

然后，如果满足条件，您要呈现的内容位于花括号之间:

{{#if active}}text{{/if}}>

所以，你的 HTML 看起来像:

{{#each elements}}
    <article {{#if active}}class="active"{{/if}}>
    ...
{{/each}}

或者，如果您还想要该元素中的静态类，您可以执行以下操作:

{{#each elements}}
    <article class="example {{#if active}}active{{/if}}">
    ...
{{/each}}