在前端开发中，经常需要对数据进行遍历操作，如果使用传统的 for 循环，代码会变得冗长且难以维护。在 Ember.js 框架中，充分利用 each 辅助器可以提高开发效率，而 ember-each-of npm 包则可以进一步简化 each 辅助器的使用过程。本文将为你介绍 npm 包 ember-each-of 的使用方法。
安装
在命令行中，进入你的项目目录，并输入以下命令进行安装：
npm install --save ember-each-of
使用
首先，在你的 Ember.js 应用中，导入 each 辅助器和 ember-each-of 包：
import { computed } from '@ember/object';
import { A } from '@ember/array';
import Component from '@ember/component';
import { each } from '@ember/object/computed';
import { eachOf } from 'ember-each-of';然后，在组件中定义数据源和目标数组：
-- -------------------- ---- -------
------ ------- ------------------
----------- ------------------- -
------ -
----- ------
---- ---
-------- ----------
--
---
------------ ----
------
---此处创建了一个数据源 dataSource 和一个空目标数组 targetArray，eachOf 辅助器则通过引入 ember-each-of 包进行了定义。接下来，在模板中使用 eachOf 辅助器：
{{#eachOf dataSource as |key value|}}
{{targetArray.pushObject (concat key ': ' value)}}
{{/eachOf}}上述代码中的 eachOf 辅助器通过 dataSource 取得数据源，对其进行遍历并按照 key-value 将数据存入 targetArray 数组中。最终每个元素会被显示为 "key: value"。
示例代码
以下是一个完整的示例代码，你可以通过将其粘贴至 Ember.js 应用的 app/components/example-component.js 中来测试 npm 包 ember-each-of 的使用：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - - - ---- ---------------
------ --------- ---- -------------------
------ - ---- - ---- -------------------------
------ - ------ - ---- ----------------
------ ------- ------------------
----------- ------------------- -
------ -
----- ------
---- ---
-------- ----------
--
---
------------ ----
-----
-------
-------- -
--------- -
----------------------- -----
-
-
----- -------------------- ---- ------- ------- ----------- -- -------- --------------- --------- ---- ------- -------- -------------------------- --------- ---------- -- ---- -------- ------------------------ ------- --- -- - -------- -----------
运行应用，点击 "Clear" 按钮将清空目标数组。
结论
npm 包 ember-each-of 简化了 each 辅助器的使用过程，使得在 Ember.js 中进行数据遍历更加简单。本文通过讲解其安装和使用，希望能够帮助读者们更快地上手并顺利地应用于实际开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb281e8991b448dc577