Series: Introduction to Ember Data 2.0

Ember Data 2.0-Getting Started, and Basics of DS.Model

Published on Dec 02, 2015

Ember Data is now stable, so we’re starting a big series on how to use it.

This first installment shows us how to get set up and how to create our first models.


Links

Code

Install your adapter addon, if necessary, then use it in adapters/application.js to set the default adapter:

import ActiveModelAdapter from 'active-model-adapter';

export default ActiveModelAdapter.extend({
});

The create your DS.Models in the models folder:

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  level: DS.attr('number'),
  imageUrl: DS.attr('string'),
  teamMemberships: DS.hasMany('team-membership'),
  price: DS.attr('number')
});

Transcript

So a couple of months ago, Ember data became stable, and that is awesome. Not only did it become stable, it jumped pretty much straight to 1.13 and then 2.0. So we’re going to go ahead now that it’s stable to dig really deep into it in a multi-part series, in order to first get you going with Ember data, get the basics, and then dig into the deeper parts of it like making your own adapters or doing complicated relationships.

So, why Ember data? First, let’s get out of the way, you can use Ember without Ember data. You can do it in even large applications such as Discourse, and for certain cases that may be the better choice, but Ember data has gotten a lot better recently since this article was written, and so we’ll go with that.

So this introduction to Ember models, it gives a good overview of why you would want to use Ember data, but the basics are it helps manage your complexity and it gives you a consistent interface with a single source of truth, which allows you to get caching easily without you having to think about it.

So if you’ve been doing JavaScript a while, then basically think of no more Ajax calls. You’ll never have to do $.Ajax again. It also gets you access to the data tab on the Ember inspector. There you can look at all the data that your app has loaded, and this is much easier than trying to find it in the console.

So let’s get started. First we’ll define our adapter. Our choice will be the ActiveModelAdapter. That works really well with the Rails backend, which I have. You can also do a JSON API adapter, a REST adapter, or you can use any of the 29 data adapters that are available, for such as django, localstorage, emberfire, lots and lots of stuff that I haven’t heard of, but it may be useful to you.

So whichever one you choose, unless it’s the built-in REST adapter or JSON API adapter, you go ahead and make sure it’s installed through NPM, and then you import it and use it.

Next you need to set up models for any type of data you’re pulling in. So here we have our monsters, our users, and our team memberships. So we start by importing DS from ember-data, and then we extend DS.Model. And so these models, they’re Ember objects, just like normal, except they can have DS attributes.

So the most basic attribute is just calling a DS.attr, and then no arguments, and what that says, it’ll say okay, when you receive something from the server, expect something called name, and this attribute just take it as it is.

If you put in string, then we’re telling Ember data to coerce it to the string type. So let’s say their name is 1, 2, 3. Then it would make sure that it was a string. We can also coerce it to a number type, and there are a boolean type, a date type, and you can also create your own types if you want. In general, it’s best to coerce it to a certain type, but if you’re not sure, let’s say you’re passing in an array of things, then you can just go ahead and not give that argument.

Alright, so there’s also relationships, and you can call DS.hasMany, so a Monster will have multiple team memberships. If you’ve done any Rails, this will look really familiar. And there’s also a belongsTo. So the Monster has many team memberships and a team membership belongs to a Monster. So what a hasMany looks like is it can be passed in an array of IDs, and a belongsTo is just one ID.

And so that’s how you can set up relationships. We’ll be going over those more later. And of course because DS.Model is an Ember object, you can do things like inject and define computed properties.

One thing to note is that if you have something coming in from the API but you don’t give it a DS.attr, then it just won’t show up. It won’t air but also just won’t be there. So we’ll take away price, and then when this reloads, we’ll see that there’s no longer price in this data, and anything that relies on the price is now not working.

On the other hand if you still have the price but you just remove the number coercion, then the price gets passed directly in, and it can still be used in these calculations but it’s not being rounded to an integer. It still has the decimal. In this particular case that’s not a big deal, but it helps to have things as the correct type.

So these are the basics of how you get started in Ember data and define your models. Of course there’s plenty more to know about Ember data, and we’ll be covering a lot of it, starting with this week’s pro-episode where we go over the most common way to pull data from the server with Ember data. I’ll see you then.

Introduction to Ember Data 2.0

Subscribe to our mailing list