NPM 包 Ember-Data 使用教程

Ember-Data 是 Ember.js 的官方数据层库，提供了强大的数据管理和 CRUD 操作功能。下面我们将详细介绍如何使用 Ember-Data。

安装

使用 npm 安装 Ember-Data：

npm install --save-dev ember-data

配置

在你的 Ember.js 应用程序中，你需要配置 Ember-Data 的 adapter 和 serializer。Adapter 处理如何与服务器通信，serializer 处理如何解析接收到的数据。

1. Adapter 配置

对于大多数情况，REST Adapter 是最好的选择。REST Adapter 知道如何正确地发送 CRUD 操作到服务器。

在 app/adapters/application.js 中配置 REST Adapter：

import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
  host = 'https://api.example.com';
  namespace = 'api/v1';
}

这里的 RESTAdapter 类是从 Ember-Data 包中导入的。

1. Serializer 配置

同样，大多数情况下，JSON API Serializer 是最佳选择。

在 app/serializers/application.js 和 app/serializers/user.js 中配置 JSON API Serializer：

import JSONAPISerializer from '@ember-data/serializer/json-api';

export default class ApplicationSerializer extends JSONAPISerializer {}

// user.js
import JSONAPISerializer from '@ember-data/serializer/json-api';

export default class UserSerializer extends JSONAPISerializer {}

数据模型定义

定义一个数据模型就像定义一个普通的 Ember.js 模型一样简单。

在 app/models/user.js 中定义 User 模型：

import Model, { attr } from '@ember-data/model';

export default class UserModel extends Model {
  @attr('string') name;
  @attr('string') email;
  @attr city;
  @attr country;
}

这里的 Model 和 attr 类是从 Ember-Data 模块中导入的。

路由和模板

在 Ember.js 中，路由会加载模板，同时加载和处理数据。

在 app/routes/users.js 中定义 Users 路由：

import Route from '@ember/routing/route';

export default class UsersRoute extends Route {
  async model() {
    return this.store.findAll('user');
  }
}

这里的 model() 方法会加载所有 User 模型。

在 app/templates/users.hbs 中，添加一个表格来显示加载的数据：

-- -------------------- ---- -------
-------
  -------
    ----
      -------------
      --------------
      -------------
      ----------------
    -----
  --------
  -------
  ------- ----- -- --------
    ----
      ----------------------
      -----------------------
      ----------------------
      -------------------------
    -----
  ---------
  --------
--------

运行应用

运行应用并查看效果：

ember serve

打开浏览器，访问 http://localhost:4200/users，你应该能看到加载的数据。

结论

本文介绍了如何使用 Ember-Data 进行数据管理和 CRUD 操作。我们学习了如何配置 Adapter 和 Serializer、如何定义数据模型以及如何加载数据和显示数据。希望这篇文章对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/59714