在 Vue 和 React 之后，Ember 是另一个流行的前端框架。ember-hammertime 是一个提供手势交互支持的 npm 包，你可以使用它来添加 swipe，tap 等手势事件。
在本篇文章中，我们将会学习以下内容：
- 什么是 ember-hammertime
- 如何使用 ember-hammertime
- 实现一个简单的手势事件
什么是 ember-hammertime？
ember-hammertime 是一个方便的手势库。它提供了一组 API，使我们可以添加各种手势事件，并能够处理不同的手势类型。在你的应用程序中使用 ember-hammertime，将会大大地简化你的开发过程，特别是在移动端下，手势事件十分重要。
如何使用 ember-hammertime？
一般来说，使用 ember-hammertime 需要遵循以下步骤：
安装 ember-hammertime
npm install --save ember-hammertime
注册要使用手势事件的元素
在
app/index.html文件中，添加以下代码：<div class="my-el"></div>
在
app/components/my-component.js中，添加以下代码：-- -------------------- ---- ------- ------ ------ ---- ----------- ------ ----- ---- -------- ------ ------ ---- ----------------- ------ ---------- ---- ------------------- ------ ------- ------------------------ ------- ----------- ----------------- ------------------ - -------------------------- --- -- - --- ---------------------------- ---- ---------- ------------ ------ ----- ---- ---------- -------------- ------ ------- ---- ---------------------------------------- ---- -- -------------------- - -------------------------- ------------------------------------------- - ---在以上代码中，我们首先导入了 HammerJS，然后使用
new Hammer.Manager()创建一个新的管理器。我们使用.add()方法向管理器中添加 Tap 和 Swipe 事件。最后，使用hammertime.registerElement()方法注册我们的元素，并为我们的元素提供一个 Hammer 管理器实例。如果你想要更多的手势事件，请阅读 HammerJS 的文档，或者查看官方的 source code。
如果你想要为多个元素使用手势事件，你需要为每个元素创建不同的
Hammer.Manager实例，然后在每个管理器实例中添加对应的事件。使用手势事件
在
app/templates/components/my-component.hbs文件中添加以下代码：<div class="my-el" {{action 'onTap' on='tap' bubbles=false preventDefault=false}} {{action 'onSwipe' on='swipe' bubbles=false preventDefault=false}}> <p>My Element</p> </div>在以上代码中，我们使用 Ember 的
$()方法来选择元素，并使用 Ember 的{{action}}helper 绑定 Tap 和 Swipe 事件。我们可以使用on属性来指定我们要绑定的事件类型，然后在 js 文件中实现对应的事件处理函数。实现事件处理函数
在
app/components/my-component.js文件中实现以下代码：-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------- ------------------------ ------- ----------- ----------------- -------- - ------- - ----------------- -- --------- - ----------------- - - ---在以上代码中，我们为 Tap 和 Swipe 事件定义了两个事件处理函数，它们在用户点击或滑动元素时被调用。
至此，我们已经完成了一个实例，你可以在你的 ember 应用程序中使用该实例。
实现一个简单的手势事件
让我们来实现一个简单的手势页面，其中包含两个元素：第一个元素用来显示滑动距离，第二个元素用来请求数据。
在 app/index.html 文件中实现以下代码：
<div id="ember-app"></div>
在 app/templates/application.hbs 文件中实现以下代码：
<div class="container">
<div class="pan" data-distance="0">
<p class="distance"></p>
</div>
<div class="refresh">
<button class="btn-refresh">Refresh</button>
</div>
</div>在 app/styles/app.scss 文件中实现以下代码：
-- -------------------- ---- -------
---------- -
------- - -----
----------- ----
---------- -----------------
------ ----
----------- -------
---- -
------- ------
----------------- -----
-------------- -----
------- -----
--------- -
------ -----
---------- -----
----------- -------
----------- -----
-
-
-------- -
------------ -
-------------- ----
-------- ---- -----
----------------- --------
------ -----
---------- -----
------- --------
------- -
----------------- --------
-
-
-
-在 app/controllers/application.js 文件中实现以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- ---------
------ ------ ---- ---------------------------
------ ------- -------------------------
-------
--------- --
------------------ -
--- --- - ------------- -------
---------------------- -------- --- -
-------- -- ---------
-------------------- ----------
------------------------- ----------
---
--
-------- -
--------- -
--------------------
-
-
---在以上代码中，我们首先导入了 $ 和 HammerJS 库。在 didInsertElement 中，我们使用 $() 选择 DOM 元素，并使用 HammerJS 的 .hammer() 方法将元素绑定到 Hammer 管理器实例中。然后，我们在管理器实例中添加一个 pan 事件，并随着滑动更新 distance，最后使用 $().attr() 方法将 data-distance 属性值修改为当前移动的距离。
在控制器中，我们使用 set() 方法更新了绑定的 distance 属性，并使用 jQuery 将 data-distance 属性值设置为 distance 的当前值。
最后，在 actions 中定义了 Refresh 事件处理函数，当用户点击按钮时，该函数将被执行。
至此，我们已经完成了整个示例。你可以在实现该示例的基础上进行更多的扩展和优化，来使你的应用程序更加强大。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e15a563576b7b1ec9ef