HandlebarsJS 每个第一个元素 - Javascript

HandlebarsJS 是一种模板引擎，它可以将数据和模板组合在一起，生成 HTML、XML 或其他格式的文档。

在 HandlebarsJS 中，通过 {{#each}} 块表达式可以循环遍历一个数组或对象，其中的 this 关键字引用当前遍历的元素。默认情况下，this 当前指向的是遍历的数组或对象中的每一个元素。但是，有时候我们需要获取到每一组中的第一个元素，这时候可以通过 @first 来引用。

下面是一个例子，我们有一个数组对象 actors，每个对象中包含两个属性 name 和 age。我们要输出每个对象中 name 属性的值，并且只输出每个对象中第一个元素的 name 值。

{{#each actors}}
  {{#if @first}}
    <p>The first actor is {{name}}</p>
  {{/if}}
{{/each}}

以上代码片段中，我们使用了 {{#if}} 的条件语句来判断是否是每组的第一个元素，如果是，则输出该元素的 name 属性的值。@first 是 HandlebarsJS 内置的变量，用来引用每个组中的第一个元素。

如果需要输出的是每个组中的第二个元素、第三个元素等，可以使用 @index 变量，它表示当前遍历到的元素的索引。

{{#each actors}}
  {{#if @index '===' 1}}
    <p>The second actor is {{name}}</p>
  {{/if}}
{{/each}}

以上代码片段中，我们使用了 {{#if}} 的条件语句来判断是否是每组的第二个元素，如果是，则输出该元素的 name 属性的值。@index 是 HandlebarsJS 内置的变量，用来引用当前遍历到的元素的索引。

总结：使用 HandlebarsJS 的 {{#each}} 块表达式可以循环遍历数组或对象，引用 @first 和 @index 变量可以方便地输出每个组中的第一个元素或其他元素。