介绍
ember-collect-helper 是一个用于 Ember.js 应用程序的实用工具，它可帮助您收集特定属性的值集合。它提供了一个名为 collect 的helper，用于收集给定属性的所有值。
安装
您可以使用 npm 在您的应用程序中安装ember-collect-helper。
--- ------- -------------------- ------
使用
在您的模板中，您可以使用 collect helper 来收集属性的所有值。
例如，假设您的模板中有一个 data 属性，它是一个由对象组成的数组。
------- ---- -- -------- ------------- --------- ------- -------- ---- ------- -- --------- --------- ---------
在这个例子中，我们使用 collect helper 来获取 data 中所有 name 属性组成的数组。我们可以将其放在 with helper 中，并命名为 names。
指南
ember-collect-helper 的真正威力在于它可以帮助您不用复杂的 JavaScript 代码来处理常见的任务。
1. 获取唯一值
如果您有一个属性值重复的数组，您可能需要获取唯一值的集合。
------- -------- ---- ----- -- ------- ------- ---------
使用 collect helper 来获取 id属性的所有值组成的数组，您可以很容易地获取唯一的 id 值。
------- ------ -------- ---- ------ -- ------- ------- ---------
如果您希望保留顺序，您可以使用 array helper 包装 collect helper，然后将结果放入数组中。
2. 过滤数组
如果您想要通过某个条件筛选数组，ember-collect-helper 也可以帮助您。
------- ------- ---- --- ------ --- --- ----------- --------- ------- -- ---------------
------- ----------- -- --------
-------------
---------
---------您可以将 collect helper 和 Ember.computed.filterBy helper 结合使用，以过滤 status为active 的对象。
------- ------ -------- ---- ------ --- ------ --- --- ----------- --------- -------- -- --------------- --------------- ---------
通过将结果放入数组中，您可以得到所有过滤后的对象的 name属性组成的数组。
3. 排序数组
ember-collect-helper 也可以帮助您按照特定属性对数组进行排序。
------- ----- ---- ------- -- -------- ------------- ---------
您可以将 collect helper 和 Ember.computed.sortBy helper 结合使用，以按 name 排序 data数组。
------- ------ -------- ---- -------- -- ---------
------- ----- ------ -- --------
--------
---------
---------通过将结果放入数组中，您可以按name属性对所有对象进行排序。
示例代码
您可以在代码库中查看更多示例。以下是使用 collect helper 收集属性的示例。
------ --------- ---- -------------------
------ - ------- - ---- -----------------------
------ ------- ------------------
----- -
- --- -- ----- ----- --
- --- -- ----- ------- --
- --- -- ----- --------- -
--
------ --------------- -------
---在这个例子中，我们将 data 数组传递给 collect helper，并指定要收集的属性为 name。names属性将包含一个由 name属性值组成的数组。
在模板中，我们可以使用 names 属性来展示所有 name值：
------- ----- -- -------- -------- ---------
总结
ember-collect-helper 扩展了 Ember.js 应用程序的功能，为您提供了一种更简单，更易于理解的方法来处理常见的任务。希望这篇文章能够帮助您更好地了解和使用这个实用工具。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055da681e8991b448db626