Backbone.js Basics: Models, Views, Collections and Templates
In this tutorial, we’re going to explore the underlying fundamentals of the popular MV* framework, Backbone.js. We’ll take a look at models, views, collections, and templates, and see how each builds off of each other when building an application. We will also touch on responsibilities and separation of concerns, ultimately paving the way for us to build a scalable application with a sane code base.
Backbone only has one hard dependency, which is Underscore.js. We will also leverage jQuery for easy DOM manipulation. Your typical document structure should look like this:
[code language=”js”]
app content here
[/code]
All app scripts must be included after the various libraries. Other than that, we’re ready to dive in!
Backbone.js & the MV* Pattern
Backbone falls under the umbrella of MV* frameworks, which means that it is primarily composed of Models and Views. Traditional MVC frameworks contain that extra C, which stands for controller. Historically, a controller would respond to some kind of user input, and communicate that input to the model, or back to the view. In MV frameworks like Backbone, though, the controller logic is handled inside the view itself. To understand a bit more about the anatomy of a JavaScript MV* framework, check out this post.
We’ve jumped the gun a bit here though, as we haven’t looked at what models and views are. Well, it’s not that complicated! I try to think of models as a “model of data”, the same way an architect might have a model of a house, or an engineer might have a model of an aerofoil. With this in mind, it’s easier to understand how a particular model is a representation of a certain set of data. In a production grade application, that data is likely stored in a database somewhere. Models can thus communicate with that database, and perform certain actions, such as CRUD operations.
What about views? Given the name “view”, it’s pretty easy to draw assumptions about the responsibility of views. If you thought that it was to render data for the end user, then you’re mostly correct. Views are indeed responsible for this. In Backbone, however, they house one other major function as I mentioned before. They handle the controller logic. In the second part of this series, I’ll get into event handling inside the view, communicating with the model, and then sending updates back to the view. For now though, it’s just important to understand that this logic does indeed exist, but resides inside the view. Let’s jump into models, and gain a better understanding of them.
Digging into Models
Here’s a little excerpt from the Backbone docs on models:
Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.
With that in mind, let’s draft up a little example that we’ll use going forward. Imagine we’re running a surf shop, and we want to build a database of surfboards that we carry. That way, if a customer asks if we have a board from a particular manufacturer, or an exact model of board, or both, we can do a quick look up. Let’s also assume that we want to keep track of the stock. Our model hierarchy would look like this:
[code language=”bash”]
Surfboard
|__manufacturer
|__model
|__stock
[/code]
In Backbone, we create a new model by extending Backbone.Model like this:
[code language=”js”]
var Surfboard = Backbone.Model.extend({
});
[/code]
Now, we can create a new instance of this model using the constructor like this:
[code language=”js”]
var board1 = new Surfboard({
manufacturer: ‘Channel Islands’,
model: ‘Whip’,
stock: 12
});
[/code]
The variable board1 now references a new instance of our Surfboard model, and contains its own set of values. As it stands though, we can pass in any values. Let’s make use of the defaults function to add some default attributes to our model. Now, it should look like this:
[code language=”js”]
var Surfboard = Backbone.Model.extend({
defaults: {
manufacturer: ”,
model: ”,
stock: 0
}
});
[/code]
If we wanted to fetch some data from that instance, we would use get, which gets the current value of an attribute from a model. Imagine we had this markup in our document:
[code language=”js”]
| Manufacturer | Model | Stock |
|---|---|---|
[/code]
We’re able to populate those fields like this:
[code language=”js”]
$(‘#board1-manufacturer’).html(board1.get(‘manufacturer’));
$(‘#board1-model’).html(board1.get(‘model’));
$(‘#board1-stock’).html(board1.get(‘stock’));
[/code]
Continue reading %Backbone.js Basics: Models, Views, Collections and Templates%
LEAVE A REPLY
You must be logged in to post a comment.