EmberFire 是一个基于 Firebase 的 NPM 包，它可以让你轻松地将 Firebase 数据库集成到 Ember.js 应用程序中。在本教程中，我们将介绍如何使用 EmberFire 来创建一个简单的待办事项列表应用程序。
步骤一：安装和配置
首先，在你的 Ember.js 应用程序中安装 EmberFire：
npm install emberfire
然后，在你的 config/environment.js 文件中添加以下内容：
ENV.firebase = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
storageBucket: "YOUR_STORAGE_BUCKET"
};将 YOUR_API_KEY、YOUR_AUTH_DOMAIN、YOUR_DATABASE_URL 和 YOUR_STORAGE_BUCKET 替换为你自己的 Firebase 项目的凭据。
步骤二：创建模型
接下来，我们需要创建一个模型来表示我们的待办事项。在你的应用程序中执行以下命令：
ember generate model todo
这将生成一个名为 todo 的模型文件和一个名为 todos 的数据存储目录。打开 app/models/todo.js 并更新它以反映以下代码：
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr('string'),
isCompleted: DS.attr('boolean')
});此模型包括一个标题属性和一个完成状态属性。
步骤三：创建路由和控制器
接下来，我们需要创建一个路由来管理我们的待办事项列表。在你的应用程序中执行以下命令：
ember generate route todos
这将生成一个名为 todos 的路由文件和一个名为 todos 的模板文件。
打开 app/routes/todos.js 并更新它以反映以下代码：
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('todo');
}
});此路由返回所有存储在 Firebase 中的待办事项列表。
现在，我们需要创建一个控制器来处理我们的模板和路由。在你的应用程序中执行以下命令：
ember generate controller todos
这将生成一个名为 todos 的控制器文件和一个名为 todos 的模板文件。
打开 app/controllers/todos.js 并更新它以反映以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
-------- -
------------ -
----- ----- - ---------------------
-- -------- - ------ ------ -
----- ---- - ------------------------------- -
------ ------
------------ -----
---
------------
-------------------- ----
--
---------------- -
---------------------
-
-
---此控制器包括两个操作：创建新的待办事项和删除现有的待办事项。
步骤四：更新模板
最后，我们需要更新我们的模板以反映我们的路由和控制器。打开 app/templates/todos.hbs 并更新它以反映以下代码：
-- -------------------- ---- -------
--------------
------- -------------- ----------------- ----- -- -- ------ ---------------------
----
------- ----- -- --------
----
------- --------------- --------------------------
----- ----------------
------- ------------------
--------
---------- ------ --------------------------------
-------
------- -------- ------------ ----------------------
-----
---------
-----此模板定义了待办事项列表，并允许用户创建新的待办事项、标记现有的待办事项为已完成并删除现有的待
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36052