Series: Introduction to Ember Data 2.0

Ember Data 2.0-Create, Save, and Destroy Records

Published on Dec 11, 2015

Ember Data isn’t just for displaying data- you can also add and remove data!

In this episode we go over the createRecord, save, deleteRecord, and destroyRecord methods.


Links

Code

You can create a record by using createRecord. The first argument is the type, the second is the hash of attribute values.

createRecord puts it in the store. You must then save it if you want it to go to the server.

var newMonster = this.store.createRecord(monster, {
  name: Quartinon,
  imageUrl: 'https://s3.amazonaws.com/monsterbattle/quartinon.png'
  level: 3,
  price: 23
})

newMonster.save()

The result of save is a promise.

There are several ways to delete a record. You can call deleteRecord on it directly, and then call save. deleteRecord just marks it as deleted.

record.deleteRecord()
record.save()

You can also call destroyRecord which does both of those steps.

record.destroyRecord()

You can also call deleteRecord on the store and pass in the record. This just calls deleteRecord on that record and still requires a call to save, so not sure why you would prefer this way.

this.store.deleteRecord(record)

The code for our in-app examples can be found [here]

Written with StackEdit.

Transcript

So far in our Ember data series, we’ve been manipulating data that already exists. Today we’re going to start adding new data and removing data that we no longer want. We’ll start by learning about createRecord.

So we can add new records by going this.store.createRecord, and then we give it the name of the type that we want to add, so we’re wanting to add a monster, and then we give it a hash. So we’re going to go ahead and just add an empty hash, and we can see that it creates a monster, although it doesn’t really have all the data that it needs.

Let’s go ahead and create another monster, this one with a bunch more data, and we can see that it shows up just like the other monsters. And since we assigned it to the newMonster variable, we can go ahead and save it. And so saving it will persist it to the server. Notice it sends out a post request. So when we reload, this monster will still be there, but this monster will disappear.

So in order to create a record, you do .createRecord. In order to get it to the server and persist it, you do .save.

Now there are several ways to delete a record. Most of them involve first getting a copy of the record. So we’ll go ahead and grab a copy of our Quartinon, and then in the console, here $E is a copy of that, and then we’ll call deleteRecord on it.

Notice here that it’s changed and it has isDeleted as true, but it hasn’t removed it from here, and it also didn’t send anything to the server. To do that you have to call $E.save, and now it disappears, as well as it sends a deleteRequest to the server. There is a way to do that all at once. So let’s go ahead and grab another monster, and you can call deleteRecord and save by calling destroyRecord, and it does both of those steps at once.

You can also call deleteRecord on the store, and it takes a record. However it has the same problems as deleteRecord. In fact, it just calls deleteRecord on the thing that you pass it, on the model that you pass it, and so I don’t really see a reason to use this version of it. I would rather do model.deleteRecord, or even better, model.destroyRecord.

So now that you’ve seen how to create and destroy records, let’s go ahead and look at what that looks like within an application. While you weren’t looking, I added a way to create monsters, as well as a way to edit and destroy monsters. So let’s go ahead and see how that works in the code.

So when we’re destroying the monster, we get the model, this is the record, and then we call destroyRecord. After that’s done, we just transition to a different route.

When we’re creating a new record, first we get the attributes, and those have been decided on in the template, the user puts those in, and this is an ES6 construct, putting it from a hash into multiple variables.

And then here’s another ES6 construct. If we’re doing it the ES5 way, it would look like this, but this is much shorter. So that’s in our createRecord, and once we have the record we call save, and then once that promise returns then we transition to that monster’s route, the newly created monster’s route.

So one quick thing to notice is that save, it returns a promise, it’s thenable, and the same thing is true of destroyRecord.

In the next episode, we’re going to be looking deeper into editing the monster. We’re going to be making it so that if you make changes, let’s say you make a bunch of changes, maybe you have a kid crawling all over and he puts it onto a huge level and price for $0. Let’s say you can’t remember what you had it at before. You want to be able to be able to roll back those changes before they’re saved. We’re going to show you how to do that easily. I’ll see you then.

Introduction to Ember Data 2.0

Subscribe to our mailing list