使用Ember Data
目前,我们的应用程序使用硬编码的数据作为租赁列表中定义的rentals路由处理程序。随着应用程序的发展,我们希望在服务器上保留我们的租用数据,并且更容易地对数据进行高级操作,如查询。
Ember提供了一个名为Ember Data的数据管理的库来帮助处理持久的应用程序数据。
Ember Data要求你通过扩展DS.Model来定义要提供给应用程序的数据的结构。
可以使用Ember CLI生成Ember数据模型。下面生成叫rental
的模型:
$ ember g model rental
installing model
create app/models/rental.js
installing model-test
create tests/unit/models/rental-test.js
我们修改rental.js
代码来定义租赁对象的结构,与之前的硬编码的JavaScript对象数组( 标题,所有者,城市,属性类型,图像,卧室和描述)相同的属性。通过函数DS.attr()的返回值定义属性。有关Ember数据属性的更多信息,请参阅指南中的Defining Attributes一节。app/models/rental.js
:
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr(),
owner: DS.attr(),
city: DS.attr(),
propertyType: DS.attr(),
image: DS.attr(),
bedrooms: DS.attr(),
description: DS.attr()
});
我们现在有一个可以用于我们的Ember Data实现的模型对象。
更新模型钩子
要使用新的Ember Data Model对象,我们需要更新之前在“模型钩子”一节中定义的model
函数。删除硬编码的JavaScript数组,并将其替换为调用Ember Data Store服务。该存储服务被注入到Ember的所有路线和组件。它是用于与Ember Data进行交互的主要接口。在这种情况下,需要调用存储的findAll函数,并向其提供新创建租赁模型类的名称作为参数。 app/routes/rentals.js
:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.get('store').findAll('rental');
}
});
当我们调用findAll
函数时,Ember Data将尝试从/api/rentals
获取租赁数据。回想一下,在“ 安装插件 ”一节中,我们设置了一个适配器通过/api
来路由数据请求。
由于我们已经在我们的开发环境中设置了Ember Mirage,所以Mirage将返回我们所要求的数据,而不会实际发出网络请求。
当我们将应用程序部署到生产服务器时,我们可能希望用Ember Data的远程服务器替换Mirage,以便与存储和检索持久化数据进行通信。远程服务器将允许在用户之间共享和更新数据。