使用基于属性的Handlebars将元素添加到元素

Tom*_*ano 3 handlebars.js

我用一个带有给定布尔属性的objets手柄#each循环,如:

elements: [
  {
    text: "a"
    active: true
  },
  {
    text: "b"
    active: false
  }
]
Run Code Online (Sandbox Code Playgroud)

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

{{#each elements}}
  <article class={{if active 'active-class'}}>
  ...
{{/each}}
Run Code Online (Sandbox Code Playgroud)

我正在使用把手4.0.6

Jam*_*ran 10

您需要从打开辅助块开始:

{{#if}}
Run Code Online (Sandbox Code Playgroud)

然后,添加要检查的参数(在本例中为布尔值):

{{#if active}}
Run Code Online (Sandbox Code Playgroud)

然后,你这样关闭它:

{{#if active}}{{/if}}
Run Code Online (Sandbox Code Playgroud)

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

{{#if active}}text{{/if}}>
Run Code Online (Sandbox Code Playgroud)

所以,你的HTML看起来像:

{{#each elements}}
    <article {{#if active}}class="active"{{/if}}>
    ...
{{/each}}
Run Code Online (Sandbox Code Playgroud)

或者,如果您还想在该元素中使用静态类,则可以执行以下操作:

{{#each elements}}
    <article class="example {{#if active}}active{{/if}}">
    ...
{{/each}}
Run Code Online (Sandbox Code Playgroud)