使用Ember Data

优质

小牛编辑

127浏览

2023-12-01

目前，我们的应用程序使用硬编码的数据作为租赁列表中定义的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，以便与存储和检索持久化数据进行通信。远程服务器将允许在用户之间共享和更新数据。