Backbone: The Get and Set of It all

What is Backbone? Well, it’s the interconnected series of bones that run down your back. But in code, Backbone JS is a framework that functions in a similar way. It connects different parts on an application to render information to the user interface. It’s the “backbone” of an application. For it to work however, it needs to have it’s own version of a nervous system to tell it what to do. These are known as setters and getters and they are integral to the function of Backbone.

Before we can define getters and setters, we must first understand why they are needed. Backbone has 3 main components in its functionality. They are the Model, the View, and the DOM. Everything that Backbone does, is to allow the application to render information on the DOM so the user can interact with it. It does this by way of the Model and the View and this is where the setters and getters come in. At their most basic, setters and getters add and retrieve information on the Model, which is the root of the application. The View then listens for the information that is added to the Model object with the getters and setters and is then able to render the information to the DOM, without the setters and getters the View would have nothing to interact with. Being an object, attributes can be added using dot notation just like any other object. However, the View is specifically listening for the set and get methods. So if the Model is manipulated with dot notation instead of set and get, the View would not react as the Model was interacted with in the wrong manner. Next, let’s look at what set and get do.

The set method is a Backbone method that is built into the Model object. It allows us to literally set values of an attribute on the Model object that the View is listening to. Values can also be updated through the use of the ‘change’ keyword.

The above example is using the set method to create an empty Matrix (in this case, a chessboard) by calling the get method to retrieve a number saved on the ’n’ attribute. This will allow the Matrix to be created with the correct number of rows and columns. If the ’n’ attribute has not yet been created, then the set method uses a number passed in by the params argument to create the ’n’ attribute with the values of the argument.

As seen above, the get method follows set and literally ‘gets’ or retrieves the value saved to a specific attribute (key) on the Model object. In this case, the value is saved on the ’n’ attribute, which then allows set to create the Matrix. For example, if the number 8 is saved to the ’n’ attribute, then set will create a Matrix with the dimensions of 8 squares x 8 squares for a total of 64 or a full-size chess board.

Set and Get also can be used on a collection in Backbone. Collection.set() will update an existing collection by adding and/or removing Models from the collection and then merging any common attributes on existing Models in the collection.

Here we have set updating the movies collection by removing the film ‘E.T.’ and replacing it with ‘Jaws’. ‘Jurassic Park’ and ‘Raiders of the Lost Ark’ would also merge any conflicting attributes that the set versions are bringing to the collection. Additionally, if any events exist on the Models in the collection, they will fire automatically during the update.

Lastly, get can also be used on collections. In this manner, get retrieves a specific Model from the collection using either the Model’s id or cid (client Id).

In this case, the id, 1993, is passed into the get invocation and will retrieve whichever movie is identified by that id (most likely ‘Jurassic Park’ as it was released in 1993. If a Model does not yet have its own id, or has not been saved to the server, it may have a client id and can be identified as such. The client id is assigned when the model is created and can be used by calling model.cid.

To conclude, setters and getters are, for a lack of a better word, the backbone of Backbone JS.They add and retrieve attributes and values on the Model object. Without those set and get invocations, the View would be unable to render anything to the DOM and not allowing the user to interact with the app. Which would be a shame as many of the world’s biggest apps use Backbone JS as their frameworks.