Backbone - Getters & Setters

Dogs are amazing. Man's best friend, one could say. One of my favorite dogs is a golden retriever. They are happy, loyal, seem to smile all of the time, and they will retrieve whatever you throw at them. It often doesn't even matter what it is: newspaper, tennis ball, golf ball, frisbee, etc.

This wonderful piece of joy has somehow manifested itself into Backbone JS in very useful way. The get method. It retrieves attributes for you. Any attribute. Yup, it's that simple. But let's not stop there. If you pair this helpful method with the usefulness of the set method, you can have a whole slew of commands at your fingertips. Let's take a quick look at what each of these methods are and what they can do for us.

The get method is a built in method in Backbone that retrieves an attribute for us. If you recall, Backbone models and collections store information in their attributes property. A collection stores an array of models, while a model stores key/value pairs of attributes. Rather than using dot notation or bracket notation to look up attributes or models(inside of a collection) we can use the three letter word, get.

Here we have a model, song, which has an attribute of title. If we want to know what the title is we'll use the get method to 'get' the title for us. The syntax is simple and straight forward.

// returns the value of the attribute title
song.get('title');

Next, let's look at the set method. Set seems awfully similar to get, if for no other reason because they rhyme. Set is as direct and simple as get, but has a few extra features that are worth noting. You can utilize this method by passing in an attributes name (key) and then passing in what you want the value to be set to. Below, we are setting year to an integer so it doesn't need quotes.

// sets the value of year on the song model
song.set('year', 1958);

// you can also set multiple attributes at once
song.set({genre: "Jazz", studio: "Van Gelder Studio"});

Set not only will set the value for the attribute you have assigned to it, it will also trigger a "change" event if any of the attributes change the Backbone model's state. In other words, you can manipulate a model's state and alter its attributes with this little (powerful) method.

Let's put it all together by creating an album (we'll use a Backbone collection) with songs in it (made from Backbone models) and practice what we know about the get and set Backbone methods.

I am a huge John Coltrane fan. Love his music. So, since we are creating an album, let's use his first record "Blue Train" as our example. We'll start by extending Backbone's Collection and Model.

const Album = Backbone.Collection.extend();

const Song = Backbone.Model.extend();

Now that we can construct our album and its songs. Let's fill in the information we know about "Blue Train" by John Coltrane:

const blueTrain = new Album();
const song_1 = new Song({title:"Blue Train"});
const song_2 = new Song({title:"Moment's Notice"});
const song_3 = new Song({title:"Locomotion"});
const song_4 = new Song({title:"I'm Old Fashioned"});
const song_5 = new Song({title:"Lazy Bird"});

Great, we recreated the album and each song. The only issue is our songs aren't yet on our album. Set method to the rescue! As we know, collections hold arrays of models so we can use set on our collection and just pass in an array of the song models:

blueTrain.set([song_1, song_2, song_3, song_4, song_5]);

Let's check out progress with map and get...

blueTrain.forEach(song => song.get('title'));

// returns an array of all of the titles, very nice!
[
  "Blue Train",
  "Moment's Notice",
  "Locomotion",
  "I'm Old Fashioned",
  "Lazy Bird"
];

Perfect. To wrap it all up, let's see if we can add an attribute to each model to show this album's record label, Blue Note.

blueTrain.forEach(song => song.set('label', 'Blue Note'));

// and to check our result...

blueTrain.at(3).get('label'); // 'Blue Note'

These methods are awesome. They can give us direct attribute access and smart manipulation on Backbone's models and collections. We can use set and get to update and change attributes or even alter state which gives us so many dynamic possibilities inside of our code. Whether you love John Coltrane, golden retrievers, or both (I can't image anyone not liking either!), these two methods will serve you well.