如何在handlebars中通过索引访问访问数组项？

Question

我正在尝试在 Handlebars 模板中指定数组项的索引：

{
  people: [
    {"name":"Yehuda Katz"},
    {"name":"Luke"},
    {"name":"Naomi"}
  ]
}

使用这个：

<ul id="luke_should_be_here">
{{people[1].name}}
</ul>

如果上述方法不可行，我该如何编写一个 helper 来访问数组中的特定项？

- lukemh

Answer 1

试试这个：

<ul id="luke_should_be_here">
{{people.1.name}}
</ul>

- dhorrigan

---

我使用 {{user.links.websites.1}} 或 {{user.links.websites.0}} 时出现了“Expecting 'ID'”错误。 - Olivier Lalonde

@OlivierLalonde，我不得不使用类似{{ websites.[0] }}的东西。 - Matt

的确，@Matt，那不仅仅是某种幸运的格式，而是一种已记录的语法结构。（请参见我的答案。） - Arjan

对于 Ember.js，我需要做类似 people.content.1.name 的事情。 - aceofspades

很多handlebars的内容要么文档不完整，要么根本没有文档。哎呀...... - dudewad

Answer 2

下面这段代码，在索引前面加一个点，就能按预期工作。当索引后面跟着另一个属性时，方括号是可选的：

{{people.[1].name}}
{{people.1.name}}

然而，在以下情况下方括号是必需的：

{{#with people.[1]}}
  {{name}}
{{/with}}

在后者中，不使用方括号的索引号会得到一个值：

Error: Parse error on line ...:
...     {{#with people.1}}                
-----------------------^
Expecting 'ID', got 'INTEGER'

作为旁注：括号也用于segment-literal syntax，用于引用实际标识符（而不是索引编号），否则这些标识符将无效。更多细节请参见什么是有效标识符？ （在YUI中使用Handlebars进行测试。）

2.xx更新

现在您可以使用get助手来完成此操作：

(get people index)

虽然如果你收到一个关于需要索引为字符串的错误，请执行以下操作：

(get people (concat index ""))

- Arjan

---

这应该是答案，因为它比所选答案更详细。在索引位于结尾时需要使用方括号让我卡住了一段时间！ - modulitos

这个解决了问题！谢谢...上面选择的答案没有用， 请将此标记为正确答案。 - MarioAraya

“{{#with people.1}}” 解决方案对我有效，使用的是 “com.github.jknack:handlebars:4.1.2”。 - Ferran Maylinch

我正在尝试找到一种方法来调整索引号，以便我可以检查循环中前一个项目的值与此项目的值是否相等。有什么想法吗？ - v3nt

Answer 3

{{#each array}}
  {{@index}}
{{/each}}

- FMQB

---

太棒了，这是正确的答案。@index会给你在数组中的位置。 - Oscar Romero

正确答案，有人可以帮我如何打印索引从1开始。默认情况下它从0开始。 - Anshu Saurabh

Answer 4

如果您不熟悉未记录的功能，同样可以在此处完成：

Handlebars.registerHelper('index_of', function(context,ndx) {
  return context[ndx];
});

然后在模板中

{{#index_of this 1}}{{/index_of}}   

在我获取到……之前，我已经写了上面的内容。

this.[0]

如果没有编写自己的helpers，我认为使用handlebars无法取得太大进展。

- Bret Weinraub

Answer 5

如果你想要使用动态变量，不能这样写：

以下方式是错误的：

{{#each obj[key]}}
...
{{/each}}

你需要做：

{{#each (lookup obj key)}}
...
{{/each}}

请查看Handlebars查找助手和Handlebars子表达式。

- julesbou

---

即使在前一个块中使用了索引和列表，查找功能仍然有效：{{lookup ../../btnPercentages @../index}}。 - MegaTux

Answer 6

如果您想获取第一/最后一个，请尝试这个。

{{#each list}}

    {{#if @first}}
        <div class="active">
    {{else}}
        <div>
    {{/if}}

{{/each}}


{{#each list}}

    {{#if @last}}
        <div class="last-element">
    {{else}}
        <div>
    {{/if}}

{{/each}}

- user1378423

Answer 7

当你使用each循环遍历数组并且想要在当前项的上下文中访问另一个数组时，可以像这样操作。

以下是示例数据。

[
  {
    name: 'foo',
    attr: [ 'boo', 'zoo' ]
  },
  {
    name: 'bar',
    attr: [ 'far', 'zar' ]
  }
]

以下是handlebars代码，用于获取attr数组中的第一项。

{{#each player}}
  <p> {{this.name}} </p>
{{#with this.attr}}
    <p> {{this.[0]}} </p>
  {{/with}}
{{/each}}

它将输出

<p> foo </p>
<p> boo </p>
<p> bar </p>
<p> far </p>

- Fatih Acet

---

如果attr数组对于不同的对象具有不同数量的元素，则迭代它的过程将是什么？例如： [ { name: 'foo', attr: [ 'boo', 'zoo' ] }, { name: 'bar', attr: [ 'far', 'zar','sar ] } ]那么，您将如何显示数组中每个对象的所有attr？ - Partha Roy

我没有尝试过，但我认为在{{#with this.attr}}中，this可以代替this.[0]。 - Fatih Acet

Answer 8

如果数组没有命名（只传递了数组到模板），也可以使用以下语法：

  <ul id="luke_should_be_here">
  {{this.1.name}}
  </ul>

- José

Answer 9

在我的情况下，我想在自定义帮助程序中访问一个数组，就像这样，

{{#ifCond arr.[@index] "foo" }}

之前的方法没有奏效，但是@julesbou提供的答案有效。

有效代码：

{{#ifCond (lookup arr @index) "" }}

希望这有所帮助！干杯。

- Sharukh Mastan

---

在这种情况下，您将如何调整索引值？即我想比较索引和索引-1的值（不起作用）。谢谢。 - v3nt