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