简介
ti-ember-sortable 是一个方便处理可排序列表的 Ember.js 组件。本教程将会介绍如何安装和使用 ti-ember-sortable，同时提供一些示例代码。
安装
使用 npm 进行安装：
npm install ti-ember-sortable
引入
在需要使用 ti-ember-sortable 的组件中引入：
import SortableComponent from 'ti-ember-sortable/component';
使用步骤
- 在使用 ti-ember-sortable 的组件中定义列表数据：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ------------------------
------ -
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- -------- --
- --- -- ----- ------ -
-
---- 在模板中使用 SortableComponent，并传入列表数据和一些参数：
{{! 在列表容器中使用 SortableComponent }}
{{#sortable-component items=items tagName='ul' itemTagName='li' itemClassNames='item'}}
{{! 在每个列表项中渲染名称 }}
{{#each items as |item|}}
<span>{{item.name}}</span>
{{/each}}
{{/sortable-component}}参数说明
- items：要进行排序的列表数据，需要是一个数组。
- tagName：列表容器的标签名，可选值有 ul、ol 等等。
- itemTagName：每个列表项的标签名，可选值有 li、div 等等。
- itemClassNames：每个列表项的 class 名称。
更多参数可以参考 ti-ember-sortable 的 GitHub 仓库。
示例代码
完整示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------------- ---- ------------------------------
------ ------- ------------------------
------ -
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- -------- --
- --- -- ----- ------ -
--
-------- -
---------------------------- -
---------------- ------ -- ----------
-
--
------------ -
------------------- --------------------
--
--------------- ------------
------------ ----------------------- ---------- -
------ ---------------------------------
---
-------- -
--------- -
--- ------- - -
--- --
----- -------
--
--------------------------------------
-
-
---模板代码：
<h2>Sortable List Demo</h2>
<button {{action 'addItem'}}>Add Grape</button>
{{#sortable-component items=items tagName='ul' itemTagName='li' itemClassNames=itemClassNames sortOptions=sortOptions as |item|}}
<span>{{item.name}}</span>
{{/sortable-component}}总结
ti-ember-sortable 是一个可排序列表的 Ember.js 组件，使用起来非常方便。在本教程中，我们了解了如何安装和使用 ti-ember-sortable，也提供了一些示例代码以供借鉴。希望这篇教程对于前端开发者们有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668fcd9381d61a3541075