Backbone.js Models

Models in Backbone.js are the “data houses” for Backbone applications. They hold the data that gets fetched from the server and they get passed to the Backbone Views so that the views can display them. When users create or update data (by filling out a form and clicking a button or by some other means), that data will be housed within a model and then sent up to the server for processing.

To define a Backbone model, you have to simply have to extend the Backbone Model.

var Artist = Backbone.Model.extend({});

And then to use it we could create a new insatance…

var artist = new Artist();

But this model is empty. Let’s initialize a model with some data. Because JavaScript is a dynamic language all we have to do is pass in whatever values we want…

var biggie = new Artist({
    name: 'Notorious BIG',
    birthday: 'May 21, 1972',    
    hometown: 'Brooklyn, NY',
    favoriteColor: 'green'
});

And now we have a model that has stored some data.

Backbone Model Default Values

There’s no hard-and-fast rule about how we need to add data to our models, but sometimes it’s a good idea to have some default values in case somewhere in our program we want to create a new instance of a model, but we are not sure what data we want to pass to it yet. In this case we can define some default values if values are not explicitly passed in when the model is instantiated. Let’s go back to our model and do this now…

var Artist = Backbone.Model.extend({
    defaults: {
        name: 'New Artist',
        birthday: 'January 1, 1970',
        hometown: 'Los Angeles, CA',
        favoriteColor: 'blue',
    }
});

Now if we create an model without passing anything into it, as we did before, this time those default values will be defined for the instance of the model…

var artist = new Artist();

If we were to pass values into the model, those values that we pass in will overwrite the default values. So we could pass in just a couple values and those would be overridden, but the rest would be set to the default values.

var biggie = new Artist({
    name: 'Notorious BIG',
    favoriteColor: 'green'
});

Initialize

All models can have an initialize function that will run the code inside of it when the model is instantiated. It is not required to have this function, though this can be a really good tool for debugging.

var Artist = Backbone.Model.extend({
    defaults:{
        name: 'New Artist',
        birthday 'January 1, 1970',
        hometown: 'Los Angeles, CA',
        favoriteColor 'blue',
    },
    initialize: function() {
        console.log('New artist created...');
    }
});

Now whenever a new artist is created the text will be logged to the console.

Get & Set

The way that other parts of your application can access model data is by using the get and set methods. The “get” method retrieves the value. The “set” method, sets the value. It’s pretty easy to use them. All you have to do is pass in the string name of the property as the first parameter. For example,

biggie.get('favoriteColor');  

We can see how the different values are stored below…

console.log('Biggie favorite color is... ' + biggie.get('favoriteColor'));
console.log('Artist favorite color is... ' + artist.get('favoriteColor'));

If we want to set values, we just have to pass in a second parameter of the new value that we want to set the property to like so…

artist.set('favoriteColor', 'orange');
biggie.set('favoriteColor', 'orange');
console.log('Favorite colors changed... ');

Now if we examine the values of our model we can see that they’ve been changed…

console.log('Biggie favorite color is... ' + biggie.get('favoriteColor'));
console.log('Artist favorite color is... ' + artist.get('favoriteColor'));

Clone

We can create a copy of a model instance by using the clone method…

var biggiesGhost = biggie.clone();
console.log(biggiesGhost.get('hometown'));

That can be a useful method when needed.

Thus, our very general overview of Backbone models is concluded. It might seem like we didn’t really do much in this tutorial, but that’s actually a good thing. Models are just the data transport packages for our Backbone applications. We don’t want a ton of logic (if-else type conditions) to be contained within our models. We want to handle that elsewhere in our code. That’s the beauty of an MVC/MV* implementation that Backbone gives you. There is a real separation of concern in terms of what part of your code is responsible for what functionality.

But it should be noted that there are other important components of Backbone models not discussed here. One thing that will be of particular importance when developing more complex Backbone applications is how you are going to handle interacting with a database on a server somewhere. You can do this with Backbone models by using the fetch and the save or sync methods. But that’s for another tutorial some other time as it will involve looking at setting up the database and REST API.

As for other Backbone model methods, there are still others that you may want to use in your applications. Not all of them are required and many of them you’ll be using in your code elsewhere — in Backbone views, Backbone collections and other helper methods. But, as mentioned before, that is what we want. We want the logic of our code to act on models. We don’t want a lot of our logic to be contained in models. For more information you can view the official Backbone.js documentation here

View Demo Download Files