前言
在现代的 Web 开发中，对于开发效率的要求越来越高，同时开源的力量可以让我们快速地构建出高效的项目。npm 是一个广泛使用的 Javascript 包管理器，其中集成了许多流行的前端框架和组件库。 在本文中，我们将介绍一款名为 ember-eureka 的开源项目，这个项目基于 Ember.js 进行开发，可以帮助开发者快速构建带有搜索过滤和排序功能的列表视图。
安装和使用
首先，我们需要在命令行中使用 npm 安装 ember-eureka。命令如下：
npm install --save ember-eureka
安装完成后，在目标项目的 app.js 文件中加入如下代码：
-- -------------------- ---- ------- ------ ----------- ---- --------------- ------ ------- -------------------------- ------------- -------------------- ---------------- ----------------------- --------- ----- -- - --------------------- - - -------------- --- ------------ ----- ------------ --- -- ------------------------- - --- -------- ---------------------- -- - ----- ------- - ------------------------------- ------------ - ----------------------------------------------------------- ----------- - ------------- ----------------------------------- -在使用页面的模板中，我们需要在列表部分加入如下代码：
-- -------------------- ---- ------- ------------- ------------------- --------------------------- --------------- --------------- --------------------- ------------------------- ------------------- --------------------------------------- ----------- ------------------------- ------------------------------- ------------------- --------------------------- ------------------- ------------------- --------------------- ----------------- ----------------------------- --------------------------------------- ----------------------- ----------------------------- ------------------ --
在组件 controller 中定义列设置：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- - --------- ------- - ---------- - - - ------ ------ ------- ------------------------- ------------ --------------------------- ---------- ------- -------------- ----------------- -- - ------ - - ---- -------- ------ ----- ----- ----- ----------- ---- -- - ---- --------- ------ ----- ----- ----- ----------- ---- -- - ---- ---------------- ------ ------- ----- ----- ----------- ---- - -- -- -
深度解析
列设置的定义
定义 columnConfigs 后，应该对它的参数含义做出详解：
- key：列名的标识符，用于 Ember 数据模型中的属性。
- label：列名的显示文本。
- sort: 表示该列是否可排序。
- searchType：用于表示搜索时该列的匹配类型，具体有哪些匹配类型可以查看官方文档
列表声明
在组件模板中声明 eureka-list 组件，然后在 controller 中定义配置项来控制罗列数据的方式:
-- -------------------- ---- ------- ------------- ------------------- --------------------------- --------------- --------------- --------------------- ------------------------- ------------------- --------------------------------------- ----------- ------------------------- ------------------------------- ------------------- --------------------------- ------------------- ------------------- --------------------- ----------------- ----------------------------- --------------------------------------- ----------------------- ----------------------------- ------------------ --
该组件接受的参数含义：
modelName: 表示所要渲染的数据模型。columnConfigs：定义了表格中各列的设置属性。content：当前页的记录数组。loading：数据正在载入。pagination：设置了分页信息的对象。addRecord和deleteRecord方法（可选）：它们被很好地定义在笔者这个 demo 中。fetchRecordsOnMount：一个在组件的生命周期钩子时执行的 boolean 值，表示是否在读取组件时自动获取数据。limit：当分页时，分页大小的限制。selectAll和showSelection允许你在稍后定义的操作中一次性选中所有内容。selection：保存所选行的 ID 的数组（以便实现刷新操作）。miniStore：状态管理器，与当前组件的生命周期绑定。showFilter、showSort和showPagination分别控制是否显示过滤器、排序器和分页菜单（可以设置为 true 或 false）。showAddRecordButton：是否显示用于添加新记录的按钮。rowClick和enableRowClick允许定制化行为。
示例代码
定义 model
import DS from 'ember-data';
const { Model } = DS;
export default Model.extend({
title: DS.attr('string'),
author: DS.attr('string'),
publishedYear: DS.attr('number')
});路由
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- ---- --------------------
------ ------- ------------------------------------ -
----- -- -
------ ----------------------------------
--
-------- -
------- -- -
-------------------------------
-
-
---book 输入
{{input value=model.title placeholder="Title"}}
{{input value=model.author placeholder="Author"}}
{{input value=model.publishedYear placeholder="Published year"}}保存事件
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
-------- -
-------- -- -
--- ---------------- - ----------------
-- ------------------ -
-------------------------------
- ---- -
--- ----- - -----
-------------------------------- -- -
----------------------------
---
-
-
-
--- 列设置
-- -------------------- ---- -------
------ ----- ---- --------
----- - --------- ------- - ---------- - - - ------
------ ------- -------------------------
------------ ---------------------------
---------- -------
-------------- ----------------- -- -
------ -
-
---- --------
------ -----
----- -----
----------- ----
--
-
---- ---------
------ -----
----- -----
----------- ----
--
-
---- ----------------
------ -------
----- -----
----------- ----
-
--
--
---过滤器设置
-- -------------------- ---- -------
------ ----- ---- --------
----- - --------- ---- ------- - ---------- - - - ------
------ ------- -------------------------
------------ ---------------------------
---------- -------
-------- ----------------- -- -
------ -
-
----- --------
------ -----
-------------- -----------------------
------------ -----
----------- -----
----------- -------------------- -
------ ----------------------- --------------------------------------------------------------------
-
-
--
--
---排序设置
-- -------------------- ---- -------
------ ----- ---- --------
----- -
---------
------- - ---------- -
- - ------
------ ------- -------------------------
------------ ---------------------------
---------- -------
-------------- ----------------- -- -
------ -
-
---- --------
------ -----
----- -----
----------- ----
--
-
---- ---------
------ -----
----- -----
----------- ----
--
-
---- ----------------
------ -------
----- -----
----------- -----
---------------- ----- -
------ ------- ---
-
-
--
--
---我们希望这篇使用教程可以对你学习前端开发有一定帮助。如需更多学习资源，可自行查阅官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e15a563576b7b1ec9f9