Backbone: Getters & Setters

Meet Bruce.

Bruce is a kind and pleasant Great White shark. He is jolly, laid-back, and a jokester. Bruce is also a vegetarian. He believes fish are friends, not food.

Bruce understands that there are certain things in life that you can do, but probably shouldn’t. Think of Bruce while I talk about this week’s topic:

Backbone: Getters & Setters

If you’re unfamiliar, the Backbone Model class provides get and set methods to read and write Model attributes. These are pretty straightforward methods to get or change an attribute.

You’re pretty smart and I imagine you asking, hey there, you seem nice and all but why would I bother using get and set if I can just blow past all that nonsense and access the values on attributes using dot or bracket notation? Like this:

this.attributes[key] = value;

The short answer is that you can because you’re a grown person and I’m not here to tell you how to live your life.

But also, I’m just going to politely mention that you’re wrong and please don’t do that.

The truth is, get and set do more than only returning and setting values. By using dot or bracket notation to access the attributes, you are bypassing all of the additional ‘things’ that get and set do for you.

Let’s bring back Bruce for help explaining:

var Shark = Backbone.Model.extend();
var sharky = new Shark ({
  name: 'Bruce',
  description: 'regular old fish',
  location: 'somewhere off the coast of Australia',
  diet: 'vegetarian'
});

Here’s what you need to know when it comes to get and set.

1. Get and Set are easy on the eyes.

To access anything on the model, all you have to do is :

sharky.get('name'); // returns 'Bruce'
sharky.set('organization', 'Fish-Friendly Sharks support group');

Let’s be honest. The above is much easier to read and more straightforward than the alternative:

sharky.attributes.name; // returns 'Bruce'
sharky.attributes.organization = 'Fish-Friendly Sharks support group'; // adds the organization attribute

Also, set lets you to add multiple attributes at once:

sharky.set({
  organization: 'Fish-Friendly Sharks support group',
  species: 'Great White'
});

Get and Set are pretty easy to read, especially if you have tons of code to look through if you’re searching for something in particular.

2. Set triggers ‘change’ event on the Model

If you have any Views that are listening for change events, this is especially important. The Model should be broadcasting any changes for the View to listen for and optionally re-render. Accessing attributes directly without set does NOT trigger any events and your Views are left to fend for themselves. So use set if you care about your events.

3. Set triggers ‘change’ event on the Collection

Similar to above, set triggers change events on any Collection that the Model is a part of. Again, this lets the View know of a change and optionally re-render itself.

SO.

What have we learned today?

Yes, that…

But also, we learned that you should be using get and set instead of going to the attributes object directly. Like Bruce, we CAN do it, but we shouldn’t. Use the get and set methods.

Think of Bruce. Be like Bruce.