npm (Node Package Manager) 是世界上最大的软件注册表，开发人员可以通过npm获得各种软件包来快速开发应用程序。而 ember-favourite-heart 就是一个npm包，它为开发者提供了一种在Ember.js应用程序中添加喜爱按钮的方便方法。
安装
在使用 ember-favourite-heart 之前，我们需要先在终端区安装它：
--- ------- ------ ---------------------
使用指南
声明组件
首先，在你的应用程序中声明组件。 在 app/components/favourite-heart.js 中编写以下代码：
------ ----- ---- --------
------ ------ ---- ------------------------------------------
------ ------- ------------------------
-------
------------ ------
-------- -
----------------- -
-----------------------------------
-
-
---这个组件包含一个isFavourite属性，这个属性表示当前的“喜欢”状态。 点击组件时，我们通过使用 toggleProperty 方法，将这个属性的值从 false 切换到 true 或从 true 切换到 false。
添加模板文件
接下来，在 app/templates/components/favourite-heart.hbs 中编写以下代码：
---- ---------------------- ---- ----------- --------------- -------- -------------------- -- --------- -------------- ------
这些模板代码定义了一个带有“喜欢” UI 的组件。
为了呈现“喜爱”按钮，我们使用CSS类“favourited”，来表示当前项目是否已被用户标记为喜欢。
在 <div> 标签内，我们还附加了一个 {{action "toggleFavourite"}} 属性，这样用户就可以单击整个组件元素来标记它。
样式定义
要使喜爱功能正常工作，我们还需要一些样式。 在 app/styles/app.css 中编写以下代码：
---------------- - ------- -------- ------ ----- ------------- ------- - --------------------------- - ------ ---- -
对于默认和选择状态，这些 CSS 类定义了适当的字体颜色。
在应用程序中使用
最后，在需要呈现喜欢按钮的地方，添加以下代码：
-------------------
这将呈现一个可单击的“喜欢”按钮。当用户点击“喜欢”按钮时，它将切换到已选状态。
示例代码
------ ----- ---- --------
------ ------ ---- ------------------------------------------
------ ------- ------------------------
-------
------------ ------
-------- -
----------------- -
-----------------------------------
-
-
------- ---------------------- ---- ----------- --------------- -------- -------------------- -- --------- -------------- ------
---------------- - ------- -------- ------ ----- ------------- ------- - --------------------------- - ------ ---- -
-------------------
总结
在这篇文章中，我们学习了如何使用npm包 ember-favourite-heart，这个包可以帮助我们在Ember.js应用程序中添加喜欢按钮。通过这篇文章的介绍，我们深入了解了组件，模板文件和样式定义中的特别之处，并且可以轻松地将喜欢按钮引入到我们的应用程序中。好的经验可以从这个包中获得，通过定制，我们可以创建更舒适的用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e16a563576b7b1eca59