在现今的前端开发中，前端框架和库的应用变得非常普遍，其中 Ember.js 是一款颇受欢迎的前端框架之一。而针对 Ember.js 的小型插件即 npm 包也是拥有许多使用者的。今天就让我们来介绍一个非常有意思的 npm 包：ember-tinycon，它可以帮助你在网页标题栏的小图标中展示未读数量，虽然非常小巧，但是非常实用。
安装
依照 npm 包的习惯，我们可以在控制台使用以下命令进行安装：
npm install ember-tinycon
使用
在安装好 ember-tinycon 后，你可以按照以下步骤来使用它：
- 在 app 文件中，我们需要在应用启动时使用以下代码初始化 ember-tinycon：
import TinyconInitializer from 'ember-tinycon/initializers/tinycon'; Ember.Application.initializer(TinyconInitializer);
- 在界面中，我们可以使用以下代码来显示未读数量：
{{! 显示未读数量 }}
{{tinycon count}}- 在控制器中，我们可以使用以下代码来更新未读数量：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
------ --
-------- -
---------------- -
--------------------------------
------------------------------------- -- -- -
---------------------------------------
---
-
-
---示例代码
接下来，我们将用一个简单的文章阅读示例来演示 ember-tinycon 的具体使用。
{{! application.hbs }}
{{!-- 每次点击阅读一篇新文章 --}}
{{outlet}}
{{!-- 未读数量 --}}
{{tinycon count}}-- -------------------- ---- -------
-- ----------
------ ----- ---- --------
------ ------- -------------------------
------ --
-------- -
------ -
--------------------- -- -- -
--------------------------------
---------------------------------------
-- ------------------------ - -------
-
-
---在上面的代码中，我们定义了一个 “article” 控制器，每当用户读完一篇文章就会随机自增一个未读数量，并将其更新到标题栏中（如下图）。
总结
在这篇文章中，我们初步介绍了如何使用 ember-tinycon，它可以帮助我们展示未读数量，非常的实用。当然，仅仅会使用是远远不够的，我们应该结合实际项目打磨技能，在更多项目中加深我们的技能。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005537b81e8991b448d0aa3