Backbone Getters and Setters
addupe
Posted on December 2, 2019
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'));
Wow, really, really, really ridiculously good looking.
Posted on December 2, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.