Series: Computed Properties

Computed Properties-Setters

Published on Jul 29, 2015

Computed Properties can go both ways, and as of Ember 1.12 it's easier than ever.

Learn how to make -and combine- basic computed property setters.


Links

Code

//demonstrations/computed-getter/controller.js
import Ember from 'ember';

export default Ember.Controller.extend({
  firstName: 'Tony',
  lastName: 'Stark',
  fullName: Ember.computed('firstName', 'lastName', {
    get(key){
      return `${this.get('firstName')} ${this.get('lastName')}`;
    },
    set(key, fullName){
      let [firstName, lastName] = fullName.split(' ');
      this.set('firstName', firstName);
      this.set('lastName', lastName);
      return fullName;
    }
  }),
  companyName: 'Stark Industries',
  businessCard: Ember.computed('fullName', 'companyName', {
    get(key){
      return `${this.get('fullName')} of ${this.get('companyName')}`;
    },
    set(key, businessCard){
      let [fullName, companyName] = businessCard.split(' of ');
      this.set('fullName', fullName);
      this.set('companyName', companyName);
      return businessCard;
    }
  }),
  //...
});
//demonstrations/computed-getter/template.hbs
First name: {{input type='text' value=firstName}}<br>
Last name: {{input type='text' value=lastName}}<br>
Full name: {{input type='text' value=fullName}}<br>
Company: {{input type='text' value=companyName}}<br>
Business Card: {{input type='text' value=businessCard}}
//...

Transcript

In the last two episodes, we’ve talked about how to use computed properties, how to get those properties both in regular properties, objects, and arrays. In this episode, we’ll be talking about how to set computed properties.

So when you just have a getter, you feed in a function as the last property of the Ember.computed helper. When you’re having a setter as well, then you’ll feed in a hash, and in this hash there will be a get property, which is a function, and then the set property, which is also a function. Here we’re using the es6 versions of the function declaration. If we wanted to, we can make it more explicitly a hash by doing it like this, but I like the es6 way better.

Now our old get can fit in just fine right here. So as we can see we have the hash of functions. Each of these functions can take a key argument, which in this case will be fullName, and then the set function can take the value argument, which will be the value that we’re setting it to. The get function will return the fullName. And this may not be as obvious, but the set function also needs to return the fullName. If you forget to do this, then it will set it to null. And that’ll mess with a lot of stuff. You don’t want that.

So then before we return value, we’re going to want to set firstName and lastName based on what’s being passed in. So what’s going to be passed in, let’s say we delete one letter, so we get Tony Star as the value. We’re going to want to decompose that into a firstName and a lastName. We’ll use the es6 feature, array destructuring, in order to get our firstName and our lastName from the value. So we’ll split it on the space. Hopefully they don’t input a middle name. And then we’ll just set the values. Then we can go into the template and make this an input field. Then when we go here, we’ll see that it changes the first and last name whenever we edit the full name.

So that is your basic computed property setter. Let’s do this again for businessCard. So this is very similar to what we had before, but notice a few things. First, what we’re splitting on is different. It happens to also be the mirror image of what we’re adding in the get. Then we’re returning... we’re setting the fullName instead of setting the firstName and lastName individually. So it’ll set the fullName and then it’ll run through this. So just in the same way that things flow downward when you’re getting, they flow back upward when you’re setting.

We’ll go back to our template and turn the Business Card into an input, and then we’ll go ahead and edit the business card, and we can see that it flows all the way back down. So a fun thing to do here, you can start from scratch, so you can... notice it filled out the fullName which split it up into First Name and Last Name, and then it split it up into Full Name and Company.

So there are some pretty cool applications you can do with that if you get creative. In this week’s pro-episode, we’ll show you how to do some more advanced setters. For example, this is an array of objects, but we can have our text field and have it set backwards into the array of objects. I’ll see you then.

Computed Properties

Subscribe to our mailing list