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