随着 Web 应用的快速发展，SPA（单页应用程序）已经成为现代 Web 应用的主流之一。在这样的背景下，使用 Ember-cli 构建 SPA 应用已经成为越来越多前端工程师的选择。接下来，我们将会介绍如何使用 Ember-cli 构建一个高质量的 SPA 应用。
Ember-cli 简介
Ember-cli 是一个带有命令行界面的命令行工具，它可以用于创建、开发和构建基于 Ember.js 开发的 Web 应用程序。通过使用 Ember-cli，我们可以非常简单地构建一个新的 Ember 应用程序，添加新的组件和路由，以及管理我们的依赖包和构建结果。
安装
首先，我们需要在本地安装 Node.js 和 npm（Node.js 包管理器）。一旦这些工具安装完成，我们就可以全局安装 Ember-cli。
--- ------- -- ---------
安装完成后，我们就可以创建一个新的 Ember 应用程序。
创建一个新应用程序
通过运行如下命令来创建一个新的 Ember 应用程序。
----- --- ------
这个命令将会在当前目录下创建一个名为 my-app 的新的 Ember 应用程序。在创建完成后，我们可以通过运行如下命令来启动这个应用程序。
-- ------ ----- -----
这个命令启动了一个开发服务器，我们可以在浏览器中访问 http://localhost:4200 来查看应用程序并进行开发。
构建一个 SPA 应用程序
接下来，我们将会使用 Ember-cli 构建一个简单而又完整的 SPA 应用程序。这个应用程序是一个 To-do List 应用程序，让用户可以列出他们的待办事项。
创建 To-do List 应用程序
首先，我们需要创建一个新的 Ember 应用程序，并命名为 todo-list。
----- --- ---------
然后，我们将会创建一个新的路由，用于展示我们的待办事项列表。
----- -------- ----- -----
这个命令将会创建一个名为 todos 的路由，并将其添加到我们的 router.js 文件中。
接下来，我们将会创建一个 todo 模型，并将其添加到应用程序中。
----- -------- ----- ----
通过运行上面的命令，我们将会创建一个 todo 模型，并将其添加到我们的应用程序中。在生成完成之后，我们需要为这个模型添加一些属性，如下所示。
-- ------------------ ------ -- ---- ------------- ------ ------- ----------------- ------ ------------------ ----------- ------------------ - ------------- ----- -- ---
现在，我们已经有了一个路由和一个模型，我们可以通过路由来展示我们的待办事项列表了。在我们的 todos 路由中，我们将会从后台服务器中获取所有的待办事项，并将其渲染到模板中。
-- -------------------
------ ----- ---- -----------------------
------ ------- --------------
------- -
------ ---------------------------
-
------- ----------------------- --- ------- ----- -- -------- ------------------------- ---------
现在，我们已经成功地渲染了我们的待办事项列表。下一步，我们将会添加一些用户交互，让用户可以添加和删除待办事项。
添加和删除待办事项
首先，我们将会创建一个新的组件，用于创建新的待办事项。
----- -------- --------- --------
然后，我们将会在 add-todo 组件中添加一些表单控件，让用户可以输入新待办事项的标题。
--- --------------------------- -- ----- -------- --------- -------------- ------ ----------- --------------- ------- ------------- ---------------- --------- ------- -------------------------- -------
在组件中，我们将会读取用户在表单控件中输入的值，并将其保存为新的待办事项。我们还将会触发一个 addTodo 事件，让父组件知道有新的待办事项需要添加到列表中。
-- --------------------------
------ --------- ---- -------------------
------ ------- ------------------
------ ---
-------- -
--------- -
-------------------------- -------------------
----------------- ----
-
-
---最后，我们需要在我们的上层组件中，即 todos 路由中，实现 addTodo 方法，来添加新的待办事项到我们的列表中。
-- -------------------
------ ----- ---- -----------------------
------ ------- --------------
------- -
------ ---------------------------
--
-------- -
-------- --------------- -
--- ---- - ------------------------------- -
------ -----
---
------------
-
-
---到这里，我们已经完成了一个简单的 To-do List 应用程序。我们还可以进一步添加删除待办事项的功能，以及对待办事项进行修改等功能。
结论
在这篇文章中，我们介绍了如何使用 Ember-cli 来构建一个高质量的 SPA 应用程序。我们从创建一个新的 Ember 应用程序开始，逐步添加了路由、模型和组件，最终实现了一个完整的 To-do List 应用程序。我们相信，通过本文的介绍，读者们已经掌握了使用 Ember-cli 构建 SPA 应用程序的基本知识，以及如何在应用程序中添加新的功能。接下来，需要读者们进行系统地学习和练习，才能更好地掌握 Ember.js 的深入知识。(完整代码见 https://github.com/rhio/todo-list-ember)
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670c7d1b13095b8ea327abb8