Series: Computed Properties

Computed Properties-Array Setters

Published on Jul 31, 2015

When your computed property getter depends on an array, your setter needs to be able to reach into the array as well.

In this episode we show you how to work with arrays and change their properties from your setter.


Links

Code

  listOfTitles: Ember.computed('documentaries.@each.name', {
    get(key){
      return this.get('documentaries').mapBy('name').join(', ');
    },
    set(key, listOfTitles){
      let arrayOfTitles = listOfTitles.split(', ');
      arrayOfTitles.forEach((title, index)=>{
        let documentary = this.get(`documentaries.${index}`)
        Ember.set(documentary, 'name', title)
      })
      return listOfTitles
    }
  }),
{{textarea value=listOfTitles}}

Transcript

In Episode 59, we learned how to use arrays in computed properties. In Episode 60, we learned how to use setters in computed properties. In this episode, we’ll learn how to use setters for arrays.

Setters can be used as the opposite of getters. So here for example, we can use the Business Card setter to backfill Company and Full name, and Full name backfills Last name and First name. Our current array property getters aren’t really a great fit for that because it’s hard to split up a summed total into its constituent parts, so we’ll create a new one.

This new one which we called titles, and it’ll be a list of all the titles of every documentary. So we’ll start off with just the getter. So create the computed property titles, and we’ll make it depend on each of the documentary's name. Then we’ll grab the documentaries, we’ll map them by name, and then we’ll join them together to create a string. We can see that it is working. It lists all of the titles in a relatively well-formed English list. So let’s turn this getter into a setter as well.

First we’ll go in here and we’ll turn it into a textarea, and we’ll give it the class of big-text-area. That’s a custom class. Then we’ll go into our controller and turn it into a setter. Just like in our previous setter, we’ll return the value at the end. So what we do in the middle, it’s more interesting.

So we’ll take our value and split it up by the commas in order to get an arrayOfTitles. Notice this turns it into an array again, and it arrays in the same order as the documentaries array. So we’ll take that arrayOfTitles and we’ll loop through them. The forEach function, it gives you the title and the index, so we’re going to use both of those. To get the documentary for that index, we’re going to get the documentaries array and find it at the index. We can do this using this.get. And then we use Ember.set to set the name for that documentary as the title.

Let’s see this in action. So we have our lists, and turns out this movie was misnamed. It was really about a bunch of statisticians, so it’s called The Averagers, and it changes up here. You should know that before I recorded this episode, I thought this was going to be a lot longer. I thought there was going to be a lot more work in getting an array set than just this. That goes to show you that doing this type of thing in Ember is going to be... it’s a little scary before you get into it, but then once you get into it, it’s a lot easier than it might seem at first.

So there are things where you could make it more complicated. For example we could sort this array, and then we’d have to find it by some other means rather than index, or we could want to add or remove and have that reflect back in the documentaries, but each of those is just a discreet challenge where you combine your knowledge of setters with your knowledge of JavaScript and Ember. I hope this helps you out, and I’ll see you next time.

Computed Properties

Subscribe to our mailing list