简介
ti-ember-sortable 是一个方便处理可排序列表的 Ember.js 组件。本教程将会介绍如何安装和使用 ti-ember-sortable，同时提供一些示例代码。
安装
使用 npm 进行安装：
--- ------- -----------------
引入
在需要使用 ti-ember-sortable 的组件中引入：
------ ----------------- ---- ------------------------------
使用步骤
- 在使用 ti-ember-sortable 的组件中定义列表数据：
------ ----- ---- --------
------ ------- ------------------------
------ -
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- -------- --
- --- -- ----- ------ -
-
---- 在模板中使用 SortableComponent，并传入列表数据和一些参数：
--- -------- ----------------- --
--------------------- ----------- ------------ ---------------- -----------------------
--- ----------- --
------- ----- -- --------
--------------------------
---------
-----------------------参数说明
- items：要进行排序的列表数据，需要是一个数组。
- tagName：列表容器的标签名，可选值有 ul、ol 等等。
- itemTagName：每个列表项的标签名，可选值有 li、div 等等。
- itemClassNames：每个列表项的 class 名称。
更多参数可以参考 ti-ember-sortable 的 GitHub 仓库。
示例代码
完整示例代码：
------ ----- ---- --------
------ ----------------- ---- ------------------------------
------ ------- ------------------------
------ -
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- -------- --
- --- -- ----- ------ -
--
-------- -
---------------------------- -
---------------- ------ -- ----------
-
--
------------ -
------------------- --------------------
--
--------------- ------------
------------ ----------------------- ---------- -
------ ---------------------------------
---
-------- -
--------- -
--- ------- - -
--- --
----- -------
--
--------------------------------------
-
-
---模板代码：
------------ ---- --------- ------- -------- --------------- -------------- --------------------- ----------- ------------ ---------------- ----------------------------- ----------------------- -- -------- -------------------------- -----------------------
总结
ti-ember-sortable 是一个可排序列表的 Ember.js 组件，使用起来非常方便。在本教程中，我们了解了如何安装和使用 ti-ember-sortable，也提供了一些示例代码以供借鉴。希望这篇教程对于前端开发者们有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668fcd9381d61a3541075