在前端开发中，使用合适的工具和框架可以极大地提高开发效率和代码质量。Ember.js 是一个流行的前端框架，它的扩展库 Ember Addons 提供了很多丰富的功能，其中就有一个十分实用的 NPM 包：ember-singularity-efarina。
本文介绍如何使用 ember-singularity-efarina，包括安装和配置，以及使用示例和深入探讨。
安装和配置
首先，需要在项目中安装该包。使用 npm 安装即可：
npm install ember-singularity-efarina
安装完成后，需要在 app.js 或 index.js 中引入该包。在 Ember.js 中，一般是在 app.js 中引入：
import SingularityEfarina from 'ember-singularity-efarina';
然后，在 app.js 的 Application 类注入该包：
const App = Ember.Application.extend({
....
inject: {
singularity: 'service:singularity-efarina'
}
});至此，安装和配置完成。
使用示例
Ember-singularity-efarina 的功能是为“分页”提供支持。在前端开发中，常常需要将大量数据分页显示，这时候就需要用到分页功能。Ember-singularity-efarina 提供了简单易用的分页组件，可以轻松地实现分页功能。
下面是一个简单的分页示例：
-- -------------------- ---- -------
-------------------------
-----------------------
-------------------------
--------------------- -- ---------
------- ----------- -- --------
----- ----------------
----------------------------
--------
-- -------- -------- -------------- ---------------------------------
-------
---------
---------------------------这个示例中，我们使用 singularity-pagination 组件来展示分页条。它有四个参数：
- currentPage：当前页码；
- itemsPerPage：每页显示的条目数；
- totalItems：总条目数；
- pager：内部参数，无需指定。
此外，还需要在 controller 中定义 currentPage、itemsPerPage 和 totalItems 参数：
import Controller from '@ember/controller';
export default Controller.extend({
currentPage: 1,
itemsPerPage: 10,
totalItems: 100,
});这样，页面上就会展示一个简单的分页条，用户可以点击页码来切换分页。这个示例只是一个简单的演示，下面将深入探讨 ember-singularity-efarina 的功能和原理。
深入探讨
Ember-singularity-efarina 实现分页功能的原理很简单：根据 currentPage、itemsPerPage 和 totalItems 计算出总页数，然后生成页码。这个过程中，使用了 Ember 的计算属性（Computed Property）机制，使得在视图层只需要绑定 currentPage、itemsPerPage 和 totalItems 三个参数，而无需关注页码的生成过程。
下面是实现分页组件的核心代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ------------------------
------------ --
------ ----------------------------- --------------- ------------- ---------- -
----- ----------- - ------------------------
----- ------------ - -------------------------
----- ---------- - -----------------------
----- ---------- - -------------------- - --------------
----- ----- - ---
--- ---- - - -- - -- ----------- ---- -
------------ ------- -- ---------- - --- ----------- ---
-
------ ------
---
-------- -
-------------------- -
----------------------- ------------
-
-
---可以看到，我们定义了一个名为 items 的计算属性，它依赖于 currentPage、itemsPerPage 和 totalItems 这三个参数。在计算属性的计算函数中，我们根据参数计算出总页数，并生成一个 pages 数组，表示所有页码。每个页码对象包含一个 number 表示页码，一个 isCurrent 表示是否当前页。
在视图层中，我们使用 each 绑定 pages 数组，在 each 中生成每一个页码。
另外，在 actions 中定义了一个 gotoPage 函数，用于接收用户点击页码时触发的事件。该函数将用户选择的页码（即 pageNumber）作为 currentPage 的值赋给它。
由此，我们实现了一个简单的分页组件。其中的原理和技术，对于 Ember.js 开发者来说，是很值得深入学习和掌握的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672381e8991b448e39a1