Backbone.js collections are used to store and manage a group of similar or related objects. If all we wanted to do was store related objects we could use a JavaScript array, but Backbone.js Collection provides an infrastructure that allows us to manage the set of data more effectively and efficiently.
As usual, I will attempt to keep the sample very simple. We will focus on collections, but we will need the assistance models in this example.
In the following example we are creating 2 models and adding them to a collection.
<html >
<head>
<title></title>
<script src="/scripts/jquery-1.8.3.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>
<script type="text/javascript">
var Movie = Backbone.Model.extend({
defaults: {
mpaaRating: "NR"
},
initialize: function() {
console.log("Movie Model initialize");
}
});
var Movies = Backbone.Collection.extend({
model: Movie,
initialize: function() {
console.log("");
console.log("Movie Collection initialize");
console.log(this);
console.log(this.length);
console.log(this.models);
}
});
var movie1 = new Movie({
"title": "Bag It",
"averageUserRating": 4.6,
"yearReleased": 2010,
"mpaaRating": "R"
});
var movie2 = new Movie({
"title": "Lost Boy: The Next Chapter",
"averageUserRating": 4.6,
"yearReleased": 2009,
"mpaaRating": "PG-13"
});
var movies = new Movies([movie1, movie2]);
console.log("");
console.log(movies.length);
console.log(movies.at(1).get("title"));
</script>
</body>
</html>
In the first section of the code we declare a Movie model class. There’s nothing special here.
Next, we declare a Movies collection class. This is very similar to declaring a Movie model class. The only difference for us is that the collection has a property called “model”. We assigned the Movie class to the collection “model” property. This tells the collection that the type of models that will be manage will be “Movie” type.
We then create 2 movie objects. Again, there’s nothing special here.
Now we finally create the “movies” collection. We also pass in the two “movie” objects that we created. We can see in the results that when the collection’s initialize method gets called the collection does not include the models that were passed in. This seems a little odd to me, but I guess this is the way it works.
After the movies collection object is created, we can work with the objects that the collection is managing.
************************************************************
The primary purpose of this example is to show how collection events work.
<html >
<head>
<title></title>
<script src="/scripts/jquery-1.8.3.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>
<script type="text/javascript">
var Movie = Backbone.Model.extend({});
var Movies = Backbone.Collection.extend({
model: Movie,
initialize: function() {
console.log("Movies initialize");
}
});
var movieAdded = function (model, collection, options) {
console.log("");
console.log("movieAdded:" + model.get("title"));
console.log("Collection Count: " + collection.length);
};
var movieChange = function (model, changes, c) {
console.log("");
console.log("movieChange:" + model.get("title"));
console.log(changes);
};
var movie1 = new Movie({
"title": "Bag It",
"averageUserRating": 4.6,
"yearReleased": 2010,
"mpaaRating": "R"
});
var movies = new Movies([movie1]);
movies.on("add", movieAdded);
movies.on("change", movieChange);
var movie2 = new Movie({
"title": "Lost Boy: The Next Chapter",
"averageUserRating": 4.6,
"yearReleased": 2009,
"mpaaRating": "PG-13"
});
movies.add([movie2]);
movie1.set({ title: "The Big Fish", yearReleased: "the big fish"});
</script>
</body>
</html>
In this code whenever a new movie is added, the “movieAdded” method should be called. And whenever an individual movie’s property is changed, then call the method “movieChange”.
In the previous code we create two methods, “movieAdded”, “movieChange”. These methods are bound to the collection movies. When the “add” event is triggered, call the method “movieAdded”. When the “change” event is triggered, call the method “movieChange”
We create a need movie and add it to the movies collection. At this time the “movieAdded” method should be triggered.
We then change the title and yearReleased of an individual movie. This should trigger the “movieChange” method.
