npm包`ember-collect-helper`使用教程

介绍

ember-collect-helper 是一个用于 Ember.js 应用程序的实用工具，它可帮助您收集特定属性的值集合。它提供了一个名为 collect 的helper，用于收集给定属性的所有值。

安装

您可以使用 npm 在您的应用程序中安装ember-collect-helper。

npm install ember-collect-helper --save

使用

在您的模板中，您可以使用 collect helper 来收集属性的所有值。

例如，假设您的模板中有一个 data 属性，它是一个由对象组成的数组。

{{#each data as |item|}}
  {{item.name}}
{{/each}}

{{#with (collect data 'name') as |names|}}
  {{names}}
{{/with}}

在这个例子中，我们使用 collect helper 来获取 data 中所有 name 属性组成的数组。我们可以将其放在 with helper 中，并命名为 names。

指南

ember-collect-helper 的真正威力在于它可以帮助您不用复杂的 JavaScript 代码来处理常见的任务。

1. 获取唯一值

如果您有一个属性值重复的数组，您可能需要获取唯一值的集合。

{{#with (collect data 'id') as |ids|}}
  {{ids}}
{{/with}}

使用 collect helper 来获取 id属性的所有值组成的数组，您可以很容易地获取唯一的 id 值。

{{#with (array (collect data 'id')) as |ids|}}
  {{ids}}
{{/with}}

如果您希望保留顺序，您可以使用 array helper 包装 collect helper，然后将结果放入数组中。

2. 过滤数组

如果您想要通过某个条件筛选数组，ember-collect-helper 也可以帮助您。

{{#with (filter data (fn (item) (if (eq item.status 'active') true))) as |activeItems|}}
  {{#each activeItems as |item|}}
    {{item.name}}
  {{/each}}
{{/with}}

您可以将 collect helper 和 Ember.computed.filterBy helper 结合使用，以过滤 status为active 的对象。

{{#with (array (collect data 'name' (fn (item) (if (eq item.status 'active') true)))) as |activeNames|}}
  {{activeNames}}
{{/with}}

通过将结果放入数组中，您可以得到所有过滤后的对象的 name属性组成的数组。

3. 排序数组

ember-collect-helper 也可以帮助您按照特定属性对数组进行排序。

{{#each (sort data 'name') as |item|}}
  {{item.name}}
{{/each}}

您可以将 collect helper 和 Ember.computed.sortBy helper 结合使用，以按 name 排序 data数组。

{{#with (array (collect data 'name')) as |names|}}
  {{#each (sort names) as |name|}}
    {{name}}
  {{/each}}
{{/with}}

通过将结果放入数组中，您可以按name属性对所有对象进行排序。

示例代码

您可以在代码库中查看更多示例。以下是使用 collect helper 收集属性的示例。

-- -------------------- ---- -------
------ --------- ---- -------------------
------ - ------- - ---- -----------------------

------ ------- ------------------
  ----- -
    - --- -- ----- ----- --
    - --- -- ----- ------- --
    - --- -- ----- --------- -
  --
  
  ------ --------------- -------
---

在这个例子中，我们将 data 数组传递给 collect helper，并指定要收集的属性为 name。names属性将包含一个由 name属性值组成的数组。

在模板中，我们可以使用 names 属性来展示所有 name值：

{{#each names as |name|}}
  {{name}}
{{/each}}

总结

ember-collect-helper 扩展了 Ember.js 应用程序的功能，为您提供了一种更简单，更易于理解的方法来处理常见的任务。希望这篇文章能够帮助您更好地了解和使用这个实用工具。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055da681e8991b448db626