Ember Composable Helpers 使用指南

Ember Composable Helpers 使用指南

ember-composable-helpers Composable helpers for declarative templating in Ember 项目地址: https://gitcode.com/gh_mirrors/em/ember-composable-helpers

1. 项目介绍

Ember Composable Helpers 是由 DockYard 开发的一个开源项目，旨在为 Ember.js 框架提供可组合的助手（Helpers），这些助手可以使得模板更加声明式，并且易于组合，以形成强大的逻辑。

该项目的特点包括：

• 可组合性：助手可以组合使用，创建复杂的逻辑。
• 易用性：通过简单的语法即可在模板中使用。
• 扩展性：可以根据需要引入或排除特定的助手。

2. 项目快速启动

安装

在您的 Ember 项目中，可以通过以下命令安装 Ember Composable Helpers：

对于 Ember 3.13+ 版本：

ember install ember-composable-helpers

对于 Ember 3.12 及以下版本：

ember install ember-composable-helpers@^2.4.0

使用

在您的 Ember 组件或模板中，可以使用以下方式引入和使用助手：

{{#each (map-by 'fullName' users) as |fullName|}}
  <input type="text" value={{fullName}} onchange={{action (mut newName)}}>
  <button {{action (pipe updateFullName saveUser) newName}}>
    Update and save {{fullName}} to {{newName}}
  </button>
{{/each}}

在上面的例子中，map-by 助手用于从用户列表中提取 fullName 属性，pipe 助手则用于将多个动作串联起来。

3. 应用案例和最佳实践

动作助手

pipe 助手可以用来串联一系列动作，如下所示：

<button {{action (pipe (action 'addToCart') (action 'purchase') (action 'redirectToThankYouPage')) item}}>
  1-Click Buy
</button>

在这个例子中，点击按钮将会依次执行添加到购物车、购买和跳转到感谢页面的动作。

数组助手

sort-by 助手可以对数组进行排序：

{{#each (sort-by 'lastName' 'firstName' (filter-by 'active' array)) as |item|}}
  {{item.lastName}}, {{item.firstName}}
{{/each}}

这里首先过滤出活跃的用户，然后按照姓和名进行排序。

对象助手

group-by 助手可以用来根据对象的某个属性进行分组：

{{#each (group-by 'category' items) as |group|}}
  <h2>{{group.key}}</h2>
  {{#each group.value as |item|}}
    {{item.name}}
  {{/each}}
{{/each}}

在这个例子中，所有项目会根据它们的 category 属性被分组。

4. 典型生态项目

Ember Composable Helpers 可以与 Ember 生态中的其他项目配合使用，例如：

• Ember CLI：用于创建和管理 Ember 项目。
• Ember Data：用于管理应用程序的数据模型。
• Ember Router：用于处理应用程序的路由和导航。

结合这些项目，可以创建出强大且可维护的 Ember 应用程序。

ember-composable-helpers Composable helpers for declarative templating in Ember 项目地址: https://gitcode.com/gh_mirrors/em/ember-composable-helpers