Over the past few days I’ve started to re-learn Backbone.js. It’s been a good while since I have worked with it. One of the many resource that I used during this endeavor is the post that I created January of this year. Understanding Backbone.js – Simple Example
Since I’m re-educating myself on Backbone.js, I thought this would be a good opportunity to Blog about the process I’m going through while re-learn Backbone.js again. In this post I will present the concept of Backbone.js Model.
So here I go again.
Based on past experience, I believe creating an application on Backbone.js there’s are few key concepts that should be understood: Model, View, Collection, Template and Router.
The first thing we are going to do is create a Movie class and instantiate an instance of the movie. Nothing fancy, this should be very simple. This Movie class will be based on a Backbone.js Model. JavaScript does not support classes, but here we will simulate a class.
Movie Sample 1
Movie Sample 1<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="scripts/underscore.js" type="text/javascript"></script>
<script src="scripts/backbone.js" type="text/javascript"></script>
</head>
<body>
Movie Sample 1
<script type="text/javascript">
var Movie = Backbone.Model.extend({
initialize: function () {
console.log("Movie Model created");
}
});
var movie = new Movie();
</script>
</body>
</html>
The code above is creating a Movie class from Backbone.Model.Extend. When an object is created from the Movie class the intialize function should be called and the message “Movie Model Created” should be written to the console.
If you load this page in a web browser, I’m using chrome, the results should be displayed in the console.
There is a problem here, everything is a global variable. Since we will be creating many Models, Views, Collections and templates, lets create a place to organize these structures.
var MovieApp = {
Models: {},
Collections: {},
Views: {},
Templates: {}
};
MovieApp.Models.Movie = Backbone.Model.extend({
initialize: function () {
console.log("Movie Model created");
}
});
var movie = new MovieApp.Models.Movie();
Above we first created namespace MovieApp that that will contain: Models, Collections, Views and Templates. Since we created this namespace the new Movie model class should be stored in MovieApp.Models. And now that the class is stored in MovieApp.Models we will need to instantiate a new instance from that class at MovieApp.Models.Movie.
Creating the Namespace MovieApp and the collections within the namespace is not required, but in the future it will help out quite a bit for organizing the classes.
I believe Stoyan can describe this better than I can.
“Namespace Pattern – JavaScript doesn’t have namespaces built into the language syntax, but this is a feature that is quite easy to achieve. Instead of polluting the global scope with a lot of functions, objects, and other variables, you can create one (and ideally only one) global object for your application or library. Then you can add all the functionality to that object.”
JavaScript Patterns (Stoyan Stefanov ) Chapter 5. Object Creation PatternsAmazon – http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752/
Safari Online – http://my.safaribooksonline.com/book/programming/javascript/9781449399115
This book and most of the books I will reference will be included in a digital library called Safari Books Online (http://my.safaribooksonline.com/). I believe Safari Books Online is without question the best resource that I have available to me. The number of books that they have available is amazing.
Move Sample 2
Lets now get some values from a Movie
MovieApp.Models.Movie = Backbone.Model.extend({
defaults: {
title: "Bag IT",
year: 2010,
averageRating: 4.6,
rating: "NR"
},
initialize: function () {
console.log("Movie Model created");
}
});
var movie = new MovieApp.Models.Movie();
console.log("The Movie Title: " + movie.get("title") + "; Rating: " + movie.get("rating"));
This is not very realistic, but I added some default values to the Model Movie class. Now anytime an object is create from the Movie class, the movie will include the properties: title, year averageRating, and Rating with default values.
The default value of “NR” for rating seems appropriate for a new movie, but the other properties probably should not have default values. So lets change it up a little bit to reflect something more real.
MovieApp.Models.Movie = Backbone.Model.extend({
defaults: {
rating: "NR"
},
initialize: function () {
console.log("Movie Model created");
}
});
var movie = new MovieApp.Models.Movie({ title: "Bag IT 2", year: 2012, averageRating: 3.6 });
console.log("The Movie Title: " + movie.get("title") + "; Rating: " + movie.get("rating"));
Here we removed all the defaults except for rating. Also when we create a new object from Movie class, we passed in some values.
Lets update the rating for the movie.
movie.set({ rating: "PG" });
console.log("The Movie Title: " + movie.get("title") + "; Rating: " + movie.get("rating"));
Here we used the set function to assign rating property the value of “PG”. It important not to set the object properties directly. The following will not work.
movie.rating = "G"; //Do not do this
console.log("The Movie Title: " + movie.get("title") + "; Rating: " + movie.get("rating"));
As you can see, assigning the movie rating property did not change the value.
Using the set function seem non-intuitive. Why not just use the regular assignment operator? The reason for the set function come to light when we start binding models to views and the need being notified of changes.
This is it for now. It’s getting late and I need to call it a night. My next post will not be for a few weeks. I believe I will next go over views.
BarDev - Archive 
Wondeful! Thanks!
awesome… tuts help a lot thank you!
Nice!
Thank you, man! At last I found one reasonably simple and still worthwhile tut on Backbone.js!
It is as if you know what I don’t know and which steps I have to take to get to know. Amazing. I’m really grateful for your effort!
Nice tutorial
Very well explained. Easy to understand. Thank you