collection Archives - Mike Barlow (BarDev)

Previously in this series we have learned about views and collection. Now lets learn about creating nested views based on a collection.

Most if not all of the concepts learned in the previous Re-Learning Backgone.js tutorials will be used in this blog post. As in previous posts, we will start-off very simple and take very small steps to get to our end goal. The reason to take all these steps is to make sure each addition to our solution works. This will be a 7 part post.

For this post our end goal is to create a very simple list of movies. Each individual movie displayed will be managed by an individual Backbone view. There will be another view that creates and manages the child views. I have bigger plans than this, but first wanted to do something simple.

Continue reading “Re-Learning Backbone.js – Nested Views”

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 of 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>

<html >

<head>

</head>

<body>

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.
Continue reading “Re-Learning Backbone.js – Collections”