Learn Backbone-js - 9 Code Examples & CST Typing Practice Test

Backbone.js is a lightweight JavaScript MVC framework that provides structure to web applications using Models, Collections, Views, and Events. It helps developers build organized, maintainable SPAs with minimal boilerplate and strong conventions.

View all 9 Backbone-js code examples →

Backbone.js Counter Component Backbone.js Counter with Max Limit Backbone.js Counter with Step Increment Backbone.js Counter with Theme Toggle Only Backbone.js Counter with History Backbone.js Counter with Auto-Reset Backbone.js Counter with Auto-Increment Backbone.js Counter with Conditional Theme Backbone.js Full Featured Counter

Learn BACKBONE-JS with Real Code Examples

Updated Nov 22, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Backbone.js Counter Component

var CounterModel = Backbone.Model.extend({
    defaults: { count: 0, isDark: false },
    increment: function() { this.set('count', this.get('count') + 1); },
    decrement: function() { this.set('count', this.get('count') - 1); },
    reset: function() { this.set('count', 0); },
    toggleTheme: function() { this.set('isDark', !this.get('isDark')); }
});

var CounterView = Backbone.View.extend({
    tagName: 'div',
    initialize: function() { this.listenTo(this.model, 'change', this.render); },
    render: function() {
        this.el.className = this.model.get('isDark') ? 'dark-theme' : 'light-theme';
        this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>' +
        '<div>' +
        '<button id="inc">+</button>' +
        '<button id="dec">-</button>' +
        '<button id="reset">Reset</button>' +
        '</div>' +
        '<button id="toggle">Switch to ' + (this.model.get('isDark') ? 'Light' : 'Dark') + ' Theme</button>';
        this.delegateEvents({ 'click #inc': 'increment', 'click #dec': 'decrement', 'click #reset': 'reset', 'click #toggle': 'toggleTheme' });
        return this;
    },
    increment: function() { this.model.increment(); },
    decrement: function() { this.model.decrement(); },
    reset: function() { this.model.reset(); },
    toggleTheme: function() { this.model.toggleTheme(); }
});

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

A simple counter using Backbone.js models and views with theme toggle.

Let’s Try →

Backbone.js Counter with Max Limit

var CounterModel = Backbone.Model.extend({
    defaults: { count: 0 },
    max: 5,
    increment: function() { if(this.get('count') < this.max) this.set('count', this.get('count') + 1); },
    decrement: function() { this.set('count', this.get('count') - 1); },
    reset: function() { this.set('count', 0); }
});

var CounterView = Backbone.View.extend({
    tagName: 'div',
    initialize: function() { this.listenTo(this.model, 'change', this.render); },
    render: function() {
        this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>' +
        '<button id="inc">+</button>' +
        '<button id="dec">-</button>' +
        '<button id="reset">Reset</button>';
        this.delegateEvents({ 'click #inc': 'increment', 'click #dec': 'decrement', 'click #reset': 'reset' });
        return this;
    },
    increment: function() { this.model.increment(); },
    decrement: function() { this.model.decrement(); },
    reset: function() { this.model.reset(); }
});

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Stops incrementing after a maximum count is reached.

Let’s Try →

Backbone.js Counter with Step Increment

var CounterModel = Backbone.Model.extend({
    defaults: { count: 0 },
    step: 2,
    increment: function() { this.set('count', this.get('count') + this.step); },
    decrement: function() { this.set('count', this.get('count') - this.step); },
    reset: function() { this.set('count', 0); }
});

var CounterView = Backbone.View.extend({
    tagName: 'div',
    initialize: function() { this.listenTo(this.model, 'change', this.render); },
    render: function() {
        this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>' +
        '<button id="inc">+</button>' +
        '<button id="dec">-</button>' +
        '<button id="reset">Reset</button>';
        this.delegateEvents({ 'click #inc': 'increment', 'click #dec': 'decrement', 'click #reset': 'reset' });
        return this;
    },
    increment: function() { this.model.increment(); },
    decrement: function() { this.model.decrement(); },
    reset: function() { this.model.reset(); }
});

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Counter increments/decrements by a specified step value.

Let’s Try →

Backbone.js Counter with Theme Toggle Only

var CounterModel = Backbone.Model.extend({ defaults: { isDark: false }, toggleTheme: function() { this.set('isDark', !this.get('isDark')); } });

var CounterView = Backbone.View.extend({ tagName: 'div', initialize: function() { this.listenTo(this.model, 'change', this.render); }, render: function() { this.el.className = this.model.get('isDark') ? 'dark-theme' : 'light-theme'; this.el.innerHTML = '<h2>Counter: 0</h2><button id="toggle">Toggle Theme</button>'; this.delegateEvents({ 'click #toggle': 'toggleTheme' }); return this; }, toggleTheme: function() { this.model.toggleTheme(); } });

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Static counter with only dark/light theme toggle.

Let’s Try →

Backbone.js Counter with History

var CounterModel = Backbone.Model.extend({ defaults: { count: 0, history: [] }, increment: function() { this.set('count', this.get('count') + 1); this.get('history').push('Increment'); }, decrement: function() { this.set('count', this.get('count') - 1); this.get('history').push('Decrement'); }, reset: function() { this.set('count', 0); this.get('history').push('Reset'); } });

var CounterView = Backbone.View.extend({ tagName: 'div', initialize: function() { this.listenTo(this.model, 'change', this.render); }, render: function() { this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>' + '<div>History: ' + this.model.get('history').join(', ') + '</div>' + '<button id="inc">+</button>' + '<button id="dec">-</button>' + '<button id="reset">Reset</button>'; this.delegateEvents({ 'click #inc': 'increment', 'click #dec': 'decrement', 'click #reset': 'reset' }); return this; }, increment: function() { this.model.increment(); }, decrement: function() { this.model.decrement(); }, reset: function() { this.model.reset(); } });

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Tracks a history of increment/decrement actions.

Let’s Try →

Backbone.js Counter with Auto-Reset

var CounterModel = Backbone.Model.extend({ defaults: { count: 0 }, threshold: 10, increment: function() { var newCount = this.get('count') + 1; if(newCount > this.threshold) newCount = 0; this.set('count', newCount); }, decrement: function() { this.set('count', this.get('count') - 1); }, reset: function() { this.set('count', 0); } });

var CounterView = Backbone.View.extend({ tagName: 'div', initialize: function() { this.listenTo(this.model, 'change', this.render); }, render: function() { this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>' + '<button id="inc">+</button>' + '<button id="dec">-</button>' + '<button id="reset">Reset</button>'; this.delegateEvents({ 'click #inc': 'increment', 'click #dec': 'decrement', 'click #reset': 'reset' }); return this; }, increment: function() { this.model.increment(); }, decrement: function() { this.model.decrement(); }, reset: function() { this.model.reset(); } });

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Automatically resets when count exceeds a threshold.

Let’s Try →

Backbone.js Counter with Auto-Increment

var CounterModel = Backbone.Model.extend({ defaults: { count: 0 }, increment: function() { this.set('count', this.get('count') + 1); } });

var CounterView = Backbone.View.extend({ tagName: 'div', initialize: function() { this.listenTo(this.model, 'change', this.render); this.interval = setInterval(() => this.model.increment(), 1000); }, render: function() { this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>'; return this; } });

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Automatically increments counter every second.

Let’s Try →

Backbone.js Counter with Conditional Theme

var CounterModel = Backbone.Model.extend({ defaults: { count: 0 }, increment: function() { this.set('count', this.get('count') + 1); }, decrement: function() { this.set('count', this.get('count') - 1); }, reset: function() { this.set('count', 0); } });

var CounterView = Backbone.View.extend({ tagName: 'div', initialize: function() { this.listenTo(this.model, 'change', this.render); }, render: function() { var isDark = this.model.get('count') % 2 === 0; this.el.className = isDark ? 'dark-theme' : 'light-theme'; this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>' + '<button id="inc">+</button>' + '<button id="dec">-</button>' + '<button id="reset">Reset</button>'; this.delegateEvents({ 'click #inc': 'increment', 'click #dec': 'decrement', 'click #reset': 'reset' }); return this; }, increment: function() { this.model.increment(); }, decrement: function() { this.model.decrement(); }, reset: function() { this.model.reset(); } });

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Theme changes automatically based on even/odd counter value.

Let’s Try →

Backbone.js Full Featured Counter

var CounterModel = Backbone.Model.extend({ defaults: { count: 0, isDark: false, history: [] }, step: 2, max: 10, increment: function() { var c = this.get('count') + this.step; if(c > this.max) c = 0; this.set('count', c); this.get('history').push('Increment'); }, decrement: function() { this.set('count', this.get('count') - this.step); this.get('history').push('Decrement'); }, reset: function() { this.set('count', 0); this.get('history').push('Reset'); }, toggleTheme: function() { this.set('isDark', !this.get('isDark')); } });

var CounterView = Backbone.View.extend({ tagName: 'div', initialize: function() { this.listenTo(this.model, 'change', this.render); }, render: function() { this.el.className = this.model.get('isDark') ? 'dark-theme' : 'light-theme'; this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>' + '<div>History: ' + this.model.get('history').join(', ') + '</div>' + '<button id="inc">+</button>' + '<button id="dec">-</button>' + '<button id="reset">Reset</button>' + '<button id="toggle">Toggle Theme</button>'; this.delegateEvents({ 'click #inc': 'increment', 'click #dec': 'decrement', 'click #reset': 'reset', 'click #toggle': 'toggleTheme' }); return this; }, increment: function() { this.model.increment(); }, decrement: function() { this.model.decrement(); }, reset: function() { this.model.reset(); }, toggleTheme: function() { this.model.toggleTheme(); } });

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Combines step increment, max limit, auto-reset, history, and theme toggle.

Let’s Try →

Frequently Asked Questions about Backbone-js

What is Backbone-js?

What are the primary use cases for Backbone-js?

Single-page applications with light structure. Legacy jQuery-based frontends. Apps requiring minimal dependencies. Projects needing manual control over architecture. Incrementally structuring existing codebases

What are the strengths of Backbone-js?

Very small and fast. Simple and unopinionated. Easy to integrate with jQuery. Perfect for incremental adoption. Great flexibility in architecture

What are the limitations of Backbone-js?

Manual rendering and DOM updates. No built-in component system. No virtual DOM. Smaller modern community. Requires more boilerplate vs modern frameworks

How can I practice Backbone-js typing speed?

CodeSpeedTest offers 9+ real Backbone-js code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Backbone.js Counter Component

var CounterModel = Backbone.Model.extend({
    defaults: { count: 0, isDark: false },
    increment: function() { this.set('count', this.get('count') + 1); },
    decrement: function() { this.set('count', this.get('count') - 1); },
    reset: function() { this.set('count', 0); },
    toggleTheme: function() { this.set('isDark', !this.get('isDark')); }
});

var CounterView = Backbone.View.extend({
    tagName: 'div',
    initialize: function() { this.listenTo(this.model, 'change', this.render); },
    render: function() {
        this.el.className = this.model.get('isDark') ? 'dark-theme' : 'light-theme';
        this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>' +
        '<div>' +
        '<button id="inc">+</button>' +
        '<button id="dec">-</button>' +
        '<button id="reset">Reset</button>' +
        '</div>' +
        '<button id="toggle">Switch to ' + (this.model.get('isDark') ? 'Light' : 'Dark') + ' Theme</button>';
        this.delegateEvents({ 'click #inc': 'increment', 'click #dec': 'decrement', 'click #reset': 'reset', 'click #toggle': 'toggleTheme' });
        return this;
    },
    increment: function() { this.model.increment(); },
    decrement: function() { this.model.decrement(); },
    reset: function() { this.model.reset(); },
    toggleTheme: function() { this.model.toggleTheme(); }
});

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

A simple counter using Backbone.js models and views with theme toggle.

Let’s Try →

Backbone.js Counter with Max Limit

var CounterModel = Backbone.Model.extend({
    defaults: { count: 0 },
    max: 5,
    increment: function() { if(this.get('count') < this.max) this.set('count', this.get('count') + 1); },
    decrement: function() { this.set('count', this.get('count') - 1); },
    reset: function() { this.set('count', 0); }
});

var CounterView = Backbone.View.extend({
    tagName: 'div',
    initialize: function() { this.listenTo(this.model, 'change', this.render); },
    render: function() {
        this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>' +
        '<button id="inc">+</button>' +
        '<button id="dec">-</button>' +
        '<button id="reset">Reset</button>';
        this.delegateEvents({ 'click #inc': 'increment', 'click #dec': 'decrement', 'click #reset': 'reset' });
        return this;
    },
    increment: function() { this.model.increment(); },
    decrement: function() { this.model.decrement(); },
    reset: function() { this.model.reset(); }
});

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Stops incrementing after a maximum count is reached.

Let’s Try →

Backbone.js Counter with Step Increment

var CounterModel = Backbone.Model.extend({
    defaults: { count: 0 },
    step: 2,
    increment: function() { this.set('count', this.get('count') + this.step); },
    decrement: function() { this.set('count', this.get('count') - this.step); },
    reset: function() { this.set('count', 0); }
});

var CounterView = Backbone.View.extend({
    tagName: 'div',
    initialize: function() { this.listenTo(this.model, 'change', this.render); },
    render: function() {
        this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>' +
        '<button id="inc">+</button>' +
        '<button id="dec">-</button>' +
        '<button id="reset">Reset</button>';
        this.delegateEvents({ 'click #inc': 'increment', 'click #dec': 'decrement', 'click #reset': 'reset' });
        return this;
    },
    increment: function() { this.model.increment(); },
    decrement: function() { this.model.decrement(); },
    reset: function() { this.model.reset(); }
});

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Counter increments/decrements by a specified step value.

Let’s Try →

Backbone.js Counter with Theme Toggle Only

var CounterModel = Backbone.Model.extend({ defaults: { isDark: false }, toggleTheme: function() { this.set('isDark', !this.get('isDark')); } });

var CounterView = Backbone.View.extend({ tagName: 'div', initialize: function() { this.listenTo(this.model, 'change', this.render); }, render: function() { this.el.className = this.model.get('isDark') ? 'dark-theme' : 'light-theme'; this.el.innerHTML = '<h2>Counter: 0</h2><button id="toggle">Toggle Theme</button>'; this.delegateEvents({ 'click #toggle': 'toggleTheme' }); return this; }, toggleTheme: function() { this.model.toggleTheme(); } });

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Static counter with only dark/light theme toggle.

Let’s Try →

Backbone.js Counter with History

var CounterModel = Backbone.Model.extend({ defaults: { count: 0, history: [] }, increment: function() { this.set('count', this.get('count') + 1); this.get('history').push('Increment'); }, decrement: function() { this.set('count', this.get('count') - 1); this.get('history').push('Decrement'); }, reset: function() { this.set('count', 0); this.get('history').push('Reset'); } });

var CounterView = Backbone.View.extend({ tagName: 'div', initialize: function() { this.listenTo(this.model, 'change', this.render); }, render: function() { this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>' + '<div>History: ' + this.model.get('history').join(', ') + '</div>' + '<button id="inc">+</button>' + '<button id="dec">-</button>' + '<button id="reset">Reset</button>'; this.delegateEvents({ 'click #inc': 'increment', 'click #dec': 'decrement', 'click #reset': 'reset' }); return this; }, increment: function() { this.model.increment(); }, decrement: function() { this.model.decrement(); }, reset: function() { this.model.reset(); } });

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Tracks a history of increment/decrement actions.

Let’s Try →

Backbone.js Counter with Auto-Reset

var CounterModel = Backbone.Model.extend({ defaults: { count: 0 }, threshold: 10, increment: function() { var newCount = this.get('count') + 1; if(newCount > this.threshold) newCount = 0; this.set('count', newCount); }, decrement: function() { this.set('count', this.get('count') - 1); }, reset: function() { this.set('count', 0); } });

var CounterView = Backbone.View.extend({ tagName: 'div', initialize: function() { this.listenTo(this.model, 'change', this.render); }, render: function() { this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>' + '<button id="inc">+</button>' + '<button id="dec">-</button>' + '<button id="reset">Reset</button>'; this.delegateEvents({ 'click #inc': 'increment', 'click #dec': 'decrement', 'click #reset': 'reset' }); return this; }, increment: function() { this.model.increment(); }, decrement: function() { this.model.decrement(); }, reset: function() { this.model.reset(); } });

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Automatically resets when count exceeds a threshold.

Let’s Try →

Backbone.js Counter with Auto-Increment

var CounterModel = Backbone.Model.extend({ defaults: { count: 0 }, increment: function() { this.set('count', this.get('count') + 1); } });

var CounterView = Backbone.View.extend({ tagName: 'div', initialize: function() { this.listenTo(this.model, 'change', this.render); this.interval = setInterval(() => this.model.increment(), 1000); }, render: function() { this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>'; return this; } });

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Automatically increments counter every second.

Let’s Try →

Backbone.js Counter with Conditional Theme

var CounterModel = Backbone.Model.extend({ defaults: { count: 0 }, increment: function() { this.set('count', this.get('count') + 1); }, decrement: function() { this.set('count', this.get('count') - 1); }, reset: function() { this.set('count', 0); } });

var CounterView = Backbone.View.extend({ tagName: 'div', initialize: function() { this.listenTo(this.model, 'change', this.render); }, render: function() { var isDark = this.model.get('count') % 2 === 0; this.el.className = isDark ? 'dark-theme' : 'light-theme'; this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>' + '<button id="inc">+</button>' + '<button id="dec">-</button>' + '<button id="reset">Reset</button>'; this.delegateEvents({ 'click #inc': 'increment', 'click #dec': 'decrement', 'click #reset': 'reset' }); return this; }, increment: function() { this.model.increment(); }, decrement: function() { this.model.decrement(); }, reset: function() { this.model.reset(); } });

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Theme changes automatically based on even/odd counter value.

Let’s Try →

Backbone.js Full Featured Counter

var CounterModel = Backbone.Model.extend({ defaults: { count: 0, isDark: false, history: [] }, step: 2, max: 10, increment: function() { var c = this.get('count') + this.step; if(c > this.max) c = 0; this.set('count', c); this.get('history').push('Increment'); }, decrement: function() { this.set('count', this.get('count') - this.step); this.get('history').push('Decrement'); }, reset: function() { this.set('count', 0); this.get('history').push('Reset'); }, toggleTheme: function() { this.set('isDark', !this.get('isDark')); } });

var CounterView = Backbone.View.extend({ tagName: 'div', initialize: function() { this.listenTo(this.model, 'change', this.render); }, render: function() { this.el.className = this.model.get('isDark') ? 'dark-theme' : 'light-theme'; this.el.innerHTML = '<h2>Counter: ' + this.model.get('count') + '</h2>' + '<div>History: ' + this.model.get('history').join(', ') + '</div>' + '<button id="inc">+</button>' + '<button id="dec">-</button>' + '<button id="reset">Reset</button>' + '<button id="toggle">Toggle Theme</button>'; this.delegateEvents({ 'click #inc': 'increment', 'click #dec': 'decrement', 'click #reset': 'reset', 'click #toggle': 'toggleTheme' }); return this; }, increment: function() { this.model.increment(); }, decrement: function() { this.model.decrement(); }, reset: function() { this.model.reset(); }, toggleTheme: function() { this.model.toggleTheme(); } });

var counter = new CounterModel();
var view = new CounterView({ model: counter });
document.body.appendChild(view.render().el);

Combines step increment, max limit, auto-reset, history, and theme toggle.

Let’s Try →

Frequently Asked Questions about Backbone-js

What is Backbone-js?

What are the primary use cases for Backbone-js?

What are the strengths of Backbone-js?

Very small and fast. Simple and unopinionated. Easy to integrate with jQuery. Perfect for incremental adoption. Great flexibility in architecture

What are the limitations of Backbone-js?

Manual rendering and DOM updates. No built-in component system. No virtual DOM. Smaller modern community. Requires more boilerplate vs modern frameworks

How can I practice Backbone-js typing speed?

CodeSpeedTest offers 9+ real Backbone-js code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.