Series: Computed Properties

ember-computed-decorators

Published on Feb 10, 2016

The ember-computed-decorators addon uses the decorator syntax to make computed properties even more awesome. We’ll see the three main uses of it- regular computed properties, computed property macros, DS.Model definitions.

No more theory - this is decorators in ACTION!


Links

Code

There are three big cool things you can do with ember-computed-decorators: regular computed properties, computed property macros, and ember-data related stuff.

First install it: ember install ember-computed-decorators.

Then, in ember-cli-build.js (previously brocfile.js) turn on ES7 decorators:

var app = new EmberApp(defaults, {
    babel: {
      optional: ['es7.decorators']
    }
    // Add options here
  });

NOTE: the following examples all double-declare properties. Don't do this in your actual code! Just use the new way!

You can turn an Ember.computed call into a decorator:

import computed from 'ember-computed-decorators'

export default Ember.Component.extend({
  //old way
  totalDocumentaryBudget: Ember.computed('documentaries.@each.budget', function(){
    //...
  }),
  //new way
  @computed('documentaries.@each.budget')
  totalDocumentaryBudget(documentaries){
    //...
  },
})

You can shorten the declaration of Ember computed macros:

import {sort} from 'ember-computed-decorators';
export default Ember.Component.extend({
  //old way
  sortedSubjects: Ember.computed.sort('subjects', 'subjectsSort'),
  //new way
  @sort('subjects', 'subjectsSort') sortedSubjects,
})

Finally, you can shorten the declaration of attributes in DS.Model:

import {attr, hasMany} from "ember-computed-decorators/ember-data";

export default DS.Model.extend({
  //old way
  firstName: DS.attr(),
  users: DS.hasMany(),

  //new way
  @attr firstName,
  @hasMany users
});

Transcript

Last time, we did an introduction to JavaScript decorators that are coming in ES7. However, you don’t have to wait. And to understand this episode, you don’t necessarily have to fully understand the last episode because Ember and Ember computed decorators makes this really easy. So let’s get started.

First, we’ll install ember-computed-decorators. Then we’ll go into ember-cli-build and turn on ES7 decorators, because they’re not quite standard yet. Then we can go ahead and start using it in our app. In our case, we’ll use it on an example app that we created a while ago.

If you’re confused by anything that we have in the app that we’re working with today, go ahead and check out this 5-video series I made on computed properties. It does an introduction, arrays, computed property macros, as well as setters and array setters. And you can see here the example app we made that has pretty extensive computed properties going both ways. So we’re going to turn all of these computed properties into computed properties that use decorators.

So first, we’ll import computed, and this is the function that will be the decorator. Now there are some patterns that hold across all of these, but this is actually one of the more complex ones we have at the start because it has a getter and a setter.

Let’s go ahead and start one that’s just a getter. So here the @ symbol, it means that it’s a decorator, and so we’re using the computed that we brought in up here. So we imported this computed, and then the arguments we’ll give it are basically the arguments that we give to ember.computed, but minus the function at the end.

So now that we have the computed decorator, we can remove this ember.computed, and what’s passed in now is the documentaries. So we no longer have to have this this.get. We can just reference it directly and it’s being passed in through here.

So this is a lot cleaner. Compare this to this. But of course we’re not going to leave this in there just for comparison sake. We’ll go ahead and turn this into the new syntax as well, and then with those two changed over, we’ll go ahead and reload our page and we’ll show that this ‘Total budget’ down here, it’s still recalculating. So our Ember computed decorator is working.

Now this next one are a list of titles. It has a getter and a setter. And so things are slightly more complicated, but not too much. So once again we’re going to be looping through a bunch of stuff, and here instead of creating one function, we’re going to create a hash with a get and a set. Now the order that this is in changes a little. So key, it stays the same, it’s still documentaries, and we can make a similar change to what we made above, just a little bit easier.

But in set, the value, here listOfTitles, is going to be given first, and then we’re going to get the documentaries. And if we go back to here, we can see that it is still working. We can change stuff and it reflects in the other place.

So that’s pretty cool, but Ember computed decorators isn’t just for ember.computed. It’s also for computed macros. As far as I can tell, these all follow a similar pattern. So first, you import, and then you import filterBy and sort in this case, from ember-computed-decorators, and then you replace the Ember.computed with an @ symbol, because it’s a decorator, and then we take the property key, subjects in this case, and we put it at the end. And so we’re going to do the exact same thing here.

So this looks, I guess a little bit better. It’s not the huge improvement that it was in here, but we’ll take any improvement we can get. And as you can see this page that it’s in still loads and it’s still sorted.

And so that’s how you use computed property macros with Ember computed decorators. And at the risk of sounding like an infomercial, there’s more. You can also do attrs and hasMany and belongsTo and Ember data in your DS.Model. So those are three really cool things you can do, computed macros, Ember data, as well as just the regular ember.computed.

So hopefully your apps can get a little bit fancier, a little bit easier to read. I’ll see you next time, and happy coding.

Computed Properties

Subscribe to our mailing list