什么是npm包
npm是Node.js的包管理器，在将前端项目开发过程中，npm包被广泛使用。npm包是指JavaScript模块组件，可以快速并且方便地将外部功能导入到我们的项目中，而不需要自己进行复杂的开发工作。
ember-ui-pagination介绍
ember-ui-pagination是一款基于Ember.js的轻量级分页插件。使用它能够轻松地对长列表进行分页操作。ember-ui-pagination拥有诸如响应式设计、自定义样式、分页选项等功能，使分页操作更为美观、有效率以及更加灵活。
安装ember-ui-pagination
我们可以使用npm包管理器将ember-ui-pagination导入到我们的项目中。在命令行输入如下指令：
npm install ember-ui-pagination
导入完毕后，我们需要将CSS样式文件和JavaScript脚本文件加入到我们的HTML代码中。在此之前，我们需要确保已经在Ember.js应用程序中安装了Ember-cli。
在命令行中，输入以下指令：
ember install ember-cli-sass
ember install ember-cli-scss
接下来，在ember-cli-build.js文件中添加以下指令：
var app = new EmberAddon(defaults, {
sassOptions: {
extension: 'scss'
}
});最后，在您的应用的app.scss中导入样式
@import "ember-ui-pagination";
现在，我们已经成功地在我们的应用程序中安装了ember-ui-pagination。
使用ember-ui-pagination
ember-ui-pagination的使用非常简单。只需要在您的模板中添加{{pagination}} 标签，然后选择您所需的选项即可。例如：
{{pagination content=list
currentPage=pageNumber
pageSize=pageSize}}其中，我们需要将带有“list”属性的数组list作为pagination选项的内容；currentPage属性将当前页传递到“pageNumber”；pageSize属性为每页显示的数量，我们将其传递为“pageSize”。
根据需求，我们可以使用其他属性来自定义我们的分页样式和选项。
-- -------------------- ---- -------
------------
-----------
---------------------
----------------------
------------------------------
-----------------
--------------------------
----------------------
-------------------
----------------------
------------------------
-------------------- -----------------高级使用
虽然使用{{pagination}} 标签非常方便，但是使用Ember CLI自定义组件可以更为简单地在我们的应用程序中自定义组件。
下面，我们将向您展示自定义组件的实现过程。
1.创建组件
您可以使用如下命令在Ember CLI中创建组件：
ember generate component my-pagination
该指令将创建一个名为 my-pagination 的组件并生成对应的模板(my-pagination.hbs)。您可以使用此模板来添加分页选项。此外，该指令还将创建一个名为“my-pagination.js”的文件以及其对应的单元测试文件。如果您还没有安装您的测试环境，可以在命令行中输入以下指令来完成安装：
ember install ember-cli-qunit
2.添加代码
之后，您可以打开 my-pagination.js 文件开始编辑代码。在此文件中，您可以建立一个分页组件。以下是示例代码：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ ------- ------------------
------------ --
--------- ---
-------------- -------- -- -
------ ---------------------------
--
---------- -------- -- -
--- ------------ - -------------------------------
--- ---------- - ------------------------------------
--- --------- - -------------------- - --------------
------ ----------
--------------------------- ------------
------ -------- -- -
--- ----- - ---
--- --------- - --------------------------------
--- ----------- - ----------------------------------
--- ------------ - -----------------------------------------
-- ---------- -- ------------- -
--- ---- - - -- - -- ---------- ---- -
--------------
-
- ---- -
--- ---- - ----------------------- - ---
-- ------------ -- ------------ - ----- -
--- ---- - - -- - -- ------------- ---- -
--------------
-
- ---- -- ------------ - --------- - ----- -
--- ---- - - --------- - ------------ - -- - -- ---------- ---- -
--------------
-
- ---- -
--- ---- - - ----------- - ---- - -- - -- ----------- - ----- ---- -
--------------
-
-
-
------ ------
----------------------- -------------- ----------------------
------------- -------- -- -
-- ------------------------ - -- -
--------------------------------------
-
--
--------- -------- -- -
-- ------------------------ - ---------------------- -
--------------------------------------
-
-
---在上方代码中，“currentPage”和“pageSize”属性将对currentPage和pageSize进行初始化，我们的元素的“content.length”属性调用内容的长度以确定我们有多少元素需要分页。我们还需要获取我们的页面数以及我们在每页上有多少项。
“pages”函数用于计算我们分页数，我们可以获取页数，当前选中的页面以及我们想要显示的页面数。在这里，我们将进行一个简单的计算来生成我们的页面列表。我们还设置了两个函数，一个用于向前跳一页，另一个用于向后跳一页。
而且，我们可以根据我们的要求自定义组件中的属性以及函数。
3.添加模板
最后，您需要在 my-pagination.hbs 文件中添加模板结构。
-- -------------------- ---- -------
---- -------------------
----
----
-------
-------- ----------------
----------------
-------------- ---- ----------- -- ----- -------
-
----------- ------ ----------------- --------------------
---------
-----
------- ----- -- --------
----
-------
-------- ---------- ------
--------------- --- ----------- ----- - ----------
-
--------
---------
-----
---------
----
-------
-------- ------------
------------
-------------- --- ----------- ---------- ----- -------
-
----------- ------ ------------- ----------------
---------
-----
-----
------在这个例子中，我们展示了一个基本的分页结构。div元素包含三个列表元素之一：上一页、当前页面和下一页。我们可以使用Ember框架的“action”属性来连接此功能到我们的JavaScript函数中。
现在，您可以将 my-pagination.js 和 my-pagination.hbs 文件导入到您的项目中，使用{{my-pagination}} 标签来调用此组件。
{{my-pagination
content=list
currentPage=pageNumber
pageSize=pageSize}}以上是如何使用npm包ember-ui-pagination的全部内容。该包可以使我们以非常简单、快捷并且灵活的方式实现分页功能。在接下来的前端设计中，很多情况下我们需要实现分页功能，这需要我们使用上述的技术进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1aa563576b7b1ecc11
