Backbone.js Answer Comment

http://bardevblog.wordpress.com/2012/01/16/understanding-backbone-js-simple-example/

HTML

<script src="https://raw.github.com/documentcloud/underscore/1.4.2/underscore.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/0.9.2/backbone.js"></script>
    <div id="mainContainer"></div>

    <script type="text/template" id="tmplt-Movie">
        <div><%=Name %></div>
    </script>

JavaScript

var Theater = {
    Models: {},
    Collections: {},
    Views: {},
    Templates: {}
};

Theater.Models.Movie = Backbone.Model.extend({});

Theater.Collections.Movies = Backbone.Collection.extend({
    model: Theater.Models.Movie,
    //url: "scripts/data/movies.json",
    initialize: function() {
        console.log("Movies initialize")
    }
});

Theater.Templates.movies = _.template($("#tmplt-Movie").html());

Theater.Views.Movies = Backbone.View.extend({
    el: $("#mainContainer"),
    template: Theater.Templates.movies,
    //collection: new Theater.Collections.Movies(), //Not needed
    initialize: function() {
        _.bindAll(this, "render");
        this.collection.bind("reset", this.render, this);
    },
    render: function() {
        this.$el.append(this.template(this.collection.at(0).toJSON()));
    }
});


var movies = new Theater.Collections.Movies();

var movieView = new Theater.Views.Movies({ collection: movies });

var myMovies =
[{
    "Id": "BVwi1",
    "Name": "Bag It",
    "AverageRating": 4.6,
    "ReleaseYear": 2010,
    "Url": "http://www.netflix.com/Movie/Bag_It/70153545",
    "Rating": "NR"
},
{
    "Id": "BW1Ss",
    "Name": "Lost Boy: The Next Chapter",
    "AverageRating": 4.6,
    "ReleaseYear": 2009,
    "Url": "http://www.netflix.com/Movie/Lost_Boy_The_Next_Chapter/70171826",
    "Rating": "NR"
}];

movies.reset(myMovies);