Learn BACKBONE-JS with Real Code Examples

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.

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.

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.

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.

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.

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.

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.

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.

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.