Finding, Creating and Saving records with Ember Data
Jun 01, 2015
Table of contents:
If you have ever rolled your own Javascript applications in the past, you’ve probably experienced the mess you usually get into when dealing with Ajax requests.
One of the big benefits of using Ember Data is that you don’t have to deal with this headache.
Instead, Ember Data provides an easy to use interface that looks and feels just like an ORM.
Over the last couple of weeks we’ve looked at some of the terminology behind Ember Data, defining models in Ember Data, as well as working with Ember Data Records.
In today’s tutorial we will be looking at finding, creating and saving records using Ember Data.
Finding Records
Ember Data provides a clean and easy way to retrieve records from the data store.
As we saw in Understanding Models and Ember Data, in each Controller or Route you will have access to this.store.
this.store is your main interface into Ember Data.
To find all records of a particular type you would write:
var users = this.store.find("user");
This would make a GET request to your /users endpoint.
As I mentioned in Understanding Models and Ember Data, Ember Data will automatically cache results from the data store in an identity map.
To return all the data from the identity map, you can use the all() method on this.store:
this.store.all("user");
When you make a request using the find() method, Ember Data will return a promise, make the request, and then return the data.
When you use the all() method, Ember Data will return the data directly from the identity map.
Finding a single record
If you want to find a single record from the store, simply pass the identifier as the second parameter to the find() method:
this.store.find("user", 123);
When the second parameter of the find() method is a string or an integer, Ember Data will assume it is the record identifier.
If you want to make a query against the endpoint, you can pass an object as the second parameter:
this.store.find("user", { username: "philipbrown" });
This will make a GET request to /users?username=philipbrown.
Creating a Record
To create a new Record you can use the createRecord() method on this.store:
var user = this.store.createRecord("user", {
username: "philipbrown",
first_name: "Philip",
last_name: "Brown",
});Yes, it really is as easy as that.
Saving a record
Once you have created a new Record using the createRecord() method, it’s time to save the data. This involves making a POST request to the server.
var user = this.store.createRecord("user", {
username: "philipbrown",
first_name: "Philip",
last_name: "Brown",
});
user.save();When you save a record Ember Data will return a promise. This is useful because all sorts of things could go wrong when making a request to the server.
We will be looking at dealing with problems when saving records in a future tutorial.
Deleting
Finally, all good applications will require the functionality to delete records too. Fortunately, Ember Data makes it just as easy to delete records as it is to create them.
To delete a record, simply call the destroyRecord() method on a Record object:
user.destroyRecord();
This will make a DELETE request to users/{id}.
Alternatively you can do this as a two step process.
First you can call deleteRecord() on the Record object:
user.deleteRecord();This will mark the record as deleted and remove it from the store cache.
Now when you call save() Ember Data will make the DELETE request to users/{id}.
user.save();Conclusion
The real beauty of using an opinionated framework like Ember is that you are relieved of a lot of the cognitive overhead of decision making.
Ember Data makes it really easy to find, create, update and delete records from your JSON API without you ever having to worry about the underlying Ajax requests.
In the grand scheme of building a web application, you shouldn’t need to worry about the plumbing.
And so building on top of a solid foundation like Ember, enables you to concentrate on what is really important for your application.
