Working with Records in Ember Data
May 25, 2015
Table of contents:
Last week we looked at defining Models in Ember Data. A Model definition is like a blueprint that describes the attributes and relationships for that resource.
The actual object that is defined by the Model is known as a Record. When you create a new object using a Model, or you find an existing instance from the store, you will be returned a Record.
You can then use this Record object in your application.
Records have a number of convenience methods available that make it really easy to work with these types of objects.
In today’s tutorial we will be looking at working with Records in your Ember Applications.
Getting and Setting data
As we saw in Understanding Models and Ember Data, you can retrieve an existing record from the Store by calling the find() method:
var post = this.store.find("post", 4456);Once you have a record object to work with you can start manipulating it’s properties.
To get a property of a record, simply call the get() method and pass the name of the argument you want to retrieve:
post.get("title");
Similarly, to set a property, call the set() method and pass the property name and the value you want to set:
post.set("title", "Hello World");
Each Record object inherits from Ember.Object class. This means you have access to all of the parent object methods. For a list of these methods, take a look at the API documentation.
Checking for dirty properties
When an attribute of a Record object changes, the Record is considered “dirty”. To check to see if a Record is dirty, you can return the isDirty property:
post.get("isDirty");
If the Record is dirty the isDirty property will return true, otherwise it will be false.
If you need to see what properties have been changed you can call the changedAttributes() method:
post.changedAttributes();This will return an object of the properties that have been changed.
When an Record is dirty you can either persist those changes to the storage using the save() method, or wipeout the changes using the rollback() method:
post.save(); // Save the changes
post.rollback(); // Wipe out the changesUsing Fixtures
If you have developed applications using other languages or frameworks, you will probably already appreciate the benefit of Fixtures.
A Fixture is an object that looks and feels just like a real Record, but it isn’t pulled from the persistent storage. Instead we create them on demand so we can simulate having access to the persistent storage.
This is useful for a number of reasons.
Firstly, it’s usually a good idea to use Fixtures in tests. You don’t want to actually be hitting a server backend when writing your client side tests.
Secondly, if you are developing your client side and your server side in parallel, you don’t want delays on one side to negatively effect the progress of the other side. By using Fixtures in the client side development we can simulate that the backend is working as it should, then switch out the real implementation when the time comes.
To set the FixtureAdapter, create a new file called application.js under adapters with the following code:
// adapters/application.js
import DS from "ember-data";
export default DS.FixtureAdapter.extend({});Next define your Model class as normal. Once you’ve defined your Model, add the Fixture data below in the same file:
Author.reopenClass({
FIXTURES: [
{ id: 1, title: "Hello World", body: ".." },
{ id: 2, title: "Is this thing on?", body: ".." },
],
});Now you can use the Store as you normally would to retrieve records. When it comes to switching out to use your actual JSON API, you can simply switch the Adapter!
Conclusion
Using a data layer like Ember Data makes working with individual Record objects really easy.
Instead of using plain old Javascript objects, we can instead using objects that inherit from Ember.Object and therefore come with all of the convenience methods of the Ember framework.
In today’s tutorial we look at working with Records in Ember Data. Next week we will look at creating, updating and deleting Records!
