What is ember-data?
Ember Data is a library for robustly managing model data in Ember.js applications. It provides a consistent way to interact with a backend data store, manage relationships between models, and handle data persistence.
What are ember-data's main functionalities?
Defining Models
Ember Data allows you to define models with attributes and relationships. In this example, a `Post` model is defined with attributes `title` and `publishedAt`, and relationships to `author` and `comments`.
import Model, { attr, belongsTo, hasMany } from '@ember-data/model';
export default class Post extends Model {
@attr('string') title;
@attr('date') publishedAt;
@belongsTo('author') author;
@hasMany('comment') comments;
}
Fetching Records
You can fetch records from the backend using the `store` service. This example demonstrates how to fetch a `post` record by its ID in a route.
import Route from '@ember/routing/route';
export default class PostRoute extends Route {
async model(params) {
return this.store.findRecord('post', params.post_id);
}
}
Saving Records
Ember Data provides methods to save records back to the backend. This example shows how to save a `post` record.
import Controller from '@ember/controller';
export default class PostController extends Controller {
async savePost(post) {
await post.save();
}
}
Handling Relationships
Ember Data makes it easy to handle relationships between models. This example demonstrates fetching a `post` along with its related `comments`.
import Route from '@ember/routing/route';
export default class PostRoute extends Route {
async model(params) {
let post = await this.store.findRecord('post', params.post_id);
let comments = await post.comments;
return { post, comments };
}
}
Other packages similar to ember-data
redux
Redux is a predictable state container for JavaScript apps. It is often used with React but can be used with any JavaScript framework. Unlike Ember Data, which is tightly integrated with Ember.js, Redux is framework-agnostic and provides a more manual approach to state management.
mobx
MobX is a simple, scalable state management library. It uses reactive programming to automatically update the UI when the state changes. MobX is more flexible and less opinionated compared to Ember Data, making it suitable for a variety of use cases.
vuex
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. Vuex is to Vue.js what Ember Data is to Ember.js, providing a structured way to manage state.
Ember Data
Ember Data is a library for robustly managing model data in your
Ember.js applications.
Ember Data is designed to be agnostic to the underlying persistence
mechanism, so it works just as well with JSON APIs over HTTP as it does
with streaming WebSockets or local IndexedDB storage.
It provides many of the facilities you'd find in server-side ORMs like
ActiveRecord, but is designed specifically for the unique environment of
JavaScript in the browser.
In particular, Ember Data uses Promises/A+-compatible promises from the
ground up to manage loading and saving records, so integrating with
other JavaScript APIs is easy.
Using Ember Data
Getting Ember Data
bower install ember-data --save
The latest passing build from the "master" branch is available on
http://emberjs.com/builds/#/canary.
Similarly, the latest passing build from the "beta" branch can be found
on http://emberjs.com/builds/#/beta
Or build ember-data.js yourself. Clone the repository and run npm run dist
after setup. You'll find ember-data.js in the dist
directory.
Internet Explorer 8
Internet Explorer 8 support requires Ember 1.8.1 (which provides a polyfill for Object.create
).
Instantiating the Store
In Ember Data, the store is responsible for managing the lifecycle of
your models. Every time you need a model or a collection of models,
you'll ask the store for it.
To create a store, you don't need to do anything. Just by loading the
Ember Data library, all of the routes and controllers in your
application will get a new store
property. This property is an
instance of DS.Store
that will be shared across all of the routes and
controllers in your app.
Defining Your Models
First thing's first: tell Ember Data about the models in your
application. For example, imagine we're writing a blog reader app.
Here's what your model definition would look like if you're using
globals (that is, not something like Ember App Kit or ember-cli):
var attr = DS.attr;
var hasMany = DS.hasMany;
var belongsTo = DS.belongsTo;
App.BlogPost = DS.Model.extend({
title: attr(),
createdAt: attr('date'),
comments: hasMany('comment')
});
App.Comment = DS.Model.extend({
body: attr(),
username: attr(),
post: belongsTo('blogPost')
});
If you're using ES6 modules (via Ember App Kit or ember-cli), your
models would look like this:
var attr = DS.attr;
var hasMany = DS.hasMany;
export default DS.Model.extend({
title: attr(),
createdAt: attr('date'),
comments: hasMany('comment')
});
var attr = DS.attr;
var belongsTo = DS.belongsTo;
export default DS.Model.extend({
body: attr(),
username: attr(),
post: belongsTo('blogPost')
});
A Brief Note on Adapters
Without immediately diving in to the depths of the architecture, one
thing you should know is that Ember Data uses an object called an
adapter to know how to talk to your server.
An adapter is just an object that knows how to translate requests from
Ember Data into requests on your server. For example, if I ask the Ember
Data store for a record of type person
with an ID of 123
, the
adapter translates that into an XHR request to (for example)
api.example.com/v3/person/123.json
.
By default, Ember Data will use the RESTAdapter
, which adheres to a
set of RESTful JSON conventions.
Ember Data also ships with the FixtureAdapter
, useful for testing and
prototyping before you have a server, and the ActiveModelAdapter
,
which is designed to work out-of-the-box with the
ActiveModel::Serializers
gem for Rails.
To learn more about adapters, including what conventions the
RESTAdapter
follows and how to build your own, see the Ember.js
Guides: Connecting to an HTTP
Server.
Fetching a Collection of Models
From your route or controller:
this.store.find('blogPost');
This returns a promise that resolves to the collection of records.
Fetching a Single Model
this.store.find('blogPost', 123);
This returns a promise that resolves to the requested record. If the
record can't be found or there was an error during the request, the
promise will be rejected.
Even More Documentation
For much more detail on how to use Ember Data, see the Ember.js Guides
on models.
API Stability
Ember Data is still under active development and is currently beta
quality. That being said, the API has largely stabilized and many
companies are using it in production.
For details on anticipated changes before the 1.0 release, see the blog
post The Road to Ember Data
1.0.
Building Ember Data
- Ensure that Node.js is installed.
- Run
npm install
to ensure the required dependencies are installed. - Run
npm run dist
to build Ember Data. The builds will be placed in the dist/
directory.
Contribution
See CONTRIBUTING.md
How to Run Unit Tests
Setup
-
Install Node.js from http://nodejs.org or your favorite package manager.
-
Install Ember CLI and bower. npm install -g ember-cli bower
-
Run npm install
inside the project root to install the JS dependencies.
In Your Browser
-
To start the development server, run npm start
.
-
Visit http://localhost:4200
From the CLI
-
Install phantomjs from http://phantomjs.org
-
Run npm test