Backbone Getters and Setters

#beginners #javascript

Backbone.js is a JavaScript framework that gives our application development some structure, separating our concerns between data (Models) and display (Views). When dealing with our Models in Backbone, we get two handy methods that help us modify and access our data. These are referred to as getters and setters.

.set()
.get()

Before we dive in, let's briefly take a peek at the Backbone.js source code:*

 Model = Backbone.Model = function (attributes, options) {
  var attrs = attributes || {};
  options || (options = {});
  this.preinitialize.apply(this, arguments);
  this.cid = _.uniqueId(this.cidPrefix);
  this.attributes = {};
  if (options.collection) this.collection = options.collection;
  if (options.parse) attrs = this.parse(attrs, options) || {};
  var defaults = _.result(this, 'defaults');
  attrs = _.defaults(_.extend({}, defaults, attrs), defaults);
  this.set(attrs, options);
  this.changed = {};
  this.initialize.apply(this, arguments);
};

We don't need to go deeply into what is happening here, but let's take some notes:

attributes are taken in and set
we have a set of defaults given to the object that we might use
set is used here
there’s an object for storing things changed
dealing with events
we also do some intializing probably dealing with view

We might guess that .set() is pretty important to the Model object if it is used in the construction of our big daddy parent object.

And if we look at the annotations made by Backbone developers on set...

This is the core primitive operation of a model, updating the data and notifying anyone who needs to know about the change in state. The heart of the beast.

.set()

is ~60 lines of code
takes in attributes
the new value
modifies the model objects' matching key/value pair
notifies any event listeners to trigger their operations

.get()

is only 2 lines of code
is essentially the equivalent of this[key]
retrieves values from the model attributes

Cool.

Here's a simplified example of how these functions might be used.

Let's say we have a modeling agency called 'Rlly Legit Models' and our agency website uses backbone. We've just signed a new model and are displaying some information to our page visitors, but were missing some information when we created this 'instance' of model.

Here's our model:

Here's his information:

const zoolander = new Model({
  name: 'derek',
  headshot: /default.jpg,
  looks: 'really, really, really ridiculously good-looking',
  canTurnLeft: false, 
  walkOffsLost: 1,
  mermaid: 'MERMAN', 
  biggestCompetition: 'Hansel',
  howOld: 'dinosaur',

});

And here's our website currently.
We're also in the process of rebranding from a produce mascot costume distributer service to a rlly legit agency. We've kept some of our previous staff on board.

Oh! We get a notification that Derek has uploaded a new image.
We need to build out some operation that can store that image onto our zoolander object.

This operation would include .set().
We would call set with two arguments: the attribute to be modified, and the value to assign to that attribute. Something like:

zoolander.set('headshot', '/images/ridiculouslyGoodLooking.jpg')

Our zoolander instance would now look like this:

const zoolander = new Model({
  name: 'derek',
  headshot: ‘/images/default.jpg’,
  looks: 'really, really, really ridiculously good-looking',
  canTurnLeft: false, 
  walkOffsLost: 1,
  mermaid: 'MERMAN', 
  biggestCompetition: 'Hansel',
  howOld: 'dinosaur',

});

To avoid complexity, let's assume we have a functioning event listener somewhere in our application that will render new information on the page as it changes. Our changed attribute is somewhere in the computer! How will we get it out and onto the page??!?

Our event listener would be using .get(). The information would be retrieved from the model instance and appended to the DOM. Inside the event listener callback we would have some version of this getter:

this.model.get('headshot'));