在 Ember.js 中，模板是与 JavaScript 代码紧密耦合的一部分。这使得构建动态 Web 应用程序非常容易。当您需要迭代一个数组并访问迭代器中的当前元素和索引时，可以使用内置的 #each 帮助程序。
#each 的基本用法
在 Ember.js 中，使用 #each 的基本方法如下所示：
{{#each array as |item|}}
{{item}}
{{/each}}其中 array 是您要迭代的数组变量名，item 是每次迭代的当前元素。在此基本用法中无法访问索引，只能访问当前元素。
访问索引
如果您需要访问索引，则需要使用以下语法：
{{#each array as |item index|}}
{{index}}: {{item}}
{{/each}}此时，index 变量将包含当前元素的索引。您可以在模板中使用它来实现更高级的功能。
例如，假设您有一个包含图书信息的数组。您希望在页面上显示每本书的标题和它们在列表中的位置（即索引）。
books: [
{ title: 'The Lord of the Rings' },
{ title: 'Harry Potter and the Sorcerer\'s Stone' },
{ title: 'To Kill a Mockingbird' }
]使用以下模板代码可以显示所需的信息：
{{#each books as |book index|}}
{{index}}. {{book.title}}
{{/each}}上面的模板将生成以下输出：
0. The Lord of the Rings 1. Harry Potter and the Sorcerer's Stone 2. To Kill a Mockingbird
Ember.js 中 #each 的高级用法
使用 Ember.js 中的 #each 还可以实现更高级的功能，例如根据条件过滤数组。下面是一个示例，它基于图书库中每本书的 isNew 属性来过滤新书。
books: [
{ title: 'The Lord of the Rings', isNew: false },
{ title: 'Harry Potter and the Sorcerer\'s Stone', isNew: true },
{ title: 'To Kill a Mockingbird', isNew: false }
]-- -------------------- ---- -------
------- ----------
----
------- ---------- ----- ------- ----- -- ----- --------
-------------- -------------------
--------
------ --- ----- -----------
---------
-----
------- ----------
----
------- ----- -- ----- --------
-------------- -------------------
---------
-----上面的模板代码将在页面上显示两个列表，其中一个只包含新书，另一个包含所有图书。
结论
在 Ember.js 中，使用 #each 可以方便地迭代数组并访问当前元素和索引。此外，还可以使用高级功能来过滤数组或执行其他操作。这使得构建动态 Web 应用程序变得更加容易和灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26394