EmberFire 是一个基于 Firebase 的 NPM 包，它可以让你轻松地将 Firebase 数据库集成到 Ember.js 应用程序中。在本教程中，我们将介绍如何使用 EmberFire 来创建一个简单的待办事项列表应用程序。
步骤一：安装和配置
首先，在你的 Ember.js 应用程序中安装 EmberFire：
--- ------- ---------
然后，在你的 config/environment.js 文件中添加以下内容：
------------ - - ------- --------------- ----------- ------------------- ------------ -------------------- -------------- --------------------- --
将 YOUR_API_KEY、YOUR_AUTH_DOMAIN、YOUR_DATABASE_URL 和 YOUR_STORAGE_BUCKET 替换为你自己的 Firebase 项目的凭据。
步骤二：创建模型
接下来，我们需要创建一个模型来表示我们的待办事项。在你的应用程序中执行以下命令：
----- -------- ----- ----
这将生成一个名为 todo 的模型文件和一个名为 todos 的数据存储目录。打开 app/models/todo.js 并更新它以反映以下代码：
------ -- ---- ------------- ------ ------- ----------------- ------ ------------------ ------------ ------------------ ---
此模型包括一个标题属性和一个完成状态属性。
步骤三：创建路由和控制器
接下来，我们需要创建一个路由来管理我们的待办事项列表。在你的应用程序中执行以下命令：
----- -------- ----- -----
这将生成一个名为 todos 的路由文件和一个名为 todos 的模板文件。
打开 app/routes/todos.js 并更新它以反映以下代码：
------ ----- ---- --------
------ ------- --------------------
------- -
------ ---------------------------
-
---此路由返回所有存储在 Firebase 中的待办事项列表。
现在，我们需要创建一个控制器来处理我们的模板和路由。在你的应用程序中执行以下命令：
----- -------- ---------- -----
这将生成一个名为 todos 的控制器文件和一个名为 todos 的模板文件。
打开 app/controllers/todos.js 并更新它以反映以下代码：
------ ----- ---- --------
------ ------- -------------------------
-------- -
------------ -
----- ----- - ---------------------
-- -------- - ------ ------ -
----- ---- - ------------------------------- -
------ ------
------------ -----
---
------------
-------------------- ----
--
---------------- -
---------------------
-
-
---此控制器包括两个操作：创建新的待办事项和删除现有的待办事项。
步骤四：更新模板
最后，我们需要更新我们的模板以反映我们的路由和控制器。打开 app/templates/todos.hbs 并更新它以反映以下代码：
--------------
------- -------------- ----------------- ----- -- -- ------ ---------------------
----
------- ----- -- --------
----
------- --------------- --------------------------
----- ----------------
------- ------------------
--------
---------- ------ --------------------------------
-------
------- -------- ------------ ----------------------
-----
---------
-----此模板定义了待办事项列表，并允许用户创建新的待办事项、标记现有的待办事项为已完成并删除现有的待
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/36052