9951 explained code solutions for 126 technologies

backbone.jsHow do I implement a Backbone.js MVC example?

To implement a Backbone.js MVC example, first create a simple HTML page with a script tag to include the Backbone.js library:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

Then, create a basic Model, View, and Collection with the following code blocks:


var UserModel = Backbone.Model.extend({
  defaults: {
    name: '',
    age: 0


var UserView = Backbone.View.extend({
  tagName: 'li',
  render: function() {
    this.$el.html(this.model.get('name') + ' (' + this.model.get('age') + ')');
    return this;


var UserCollection = Backbone.Collection.extend({
  model: UserModel

Finally, instantiate the Model, View, and Collection, and render the View:

var user = new UserModel({name: 'John', age: 25});
var userView = new UserView({model: user});
var userCollection = new UserCollection([user]);


Output example

<li>John (25)</li>

Code explanation

  • HTML page to include Backbone.js library
  • Model: UserModel
  • View: UserView
  • Collection: UserCollection
  • Instantiation of Model, View, and Collection
  • Rendering of View

Helpful links

Edit this code on GitHub