9951 explained code solutions for 126 technologies

backbone.jsHow can I quickly get started with Backbone.js?

  1. First, read the Backbone.js documentation to understand the core concepts and components of the library.

  2. To get started with Backbone.js, you will need a web server and a browser. You can use a local web server like XAMPP or WAMP.

  3. Create an HTML page and include the Backbone.js library. You can either download the library or include it from a CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
  1. Create a Backbone Model to store data. The model will have attributes and methods to manipulate the data.
var User = Backbone.Model.extend({
    defaults: {
        name: '',
        age: 0

var user = new User({name: 'John', age: 25});
  1. Create a Backbone View to represent the data in the model. The view will have methods to render the data in the browser.
var UserView = Backbone.View.extend({
    el: '#user-info',
    render: function(){
        this.$el.html(this.model.get('name') + ' is ' + this.model.get('age') + ' years old.');
        return this;

var userView = new UserView({model: user});
  1. Create a Backbone Router to handle navigation in the application. The router will define routes and callbacks to handle different routes.
var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'index',
        'user': 'showUser'
    index: function(){
        // show the index page
    showUser: function(){
        // show the user page

var router = new AppRouter();
  1. Finally, you can use Backbone events to bind events to the model, view, and router. This will allow your application to respond to user actions.
user.on('change', function(){
    // update the view

Edit this code on GitHub