backbone.jsHow can I create a project using Backbone.js?

Creating a project with Backbone.js is a simple process. Here are the steps:

Create an HTML page for the project:

<!DOCTYPE html>
<html>
  <head>
    <title>My Backbone Project</title>
  </head>
  <body>
    <div id="main"></div>
  </body>
</html>

Include the Backbone library in the HTML page:

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

Create a model to represent the data:

var MyModel = Backbone.Model.extend({
  defaults: {
    name: '',
    age: 0
  }
});

Create a view to render the model:

var MyView = Backbone.View.extend({
  el: '#main',
  render: function() {
    this.$el.html('Name: ' + this.model.get('name') + ', Age: ' + this.model.get('age'));
  }
});

Instantiate the model and view:

var myModel = new MyModel({name: 'John', age: 25});
var myView = new MyView({model: myModel});

Render the view:

myView.render();

Output:

Name: John, Age: 25

Helpful links

Edit this code on GitHub

More of Backbone.js

See more codes...