Backbone JS – Schools

Backbone js is one of good framework. It’s light weight and give structure to web application. It consist of :

Model
View
Collection
Router
Templating (use UnderscoreJs and Handlebarjs)

Basic

To use backbone , it require jquery (not mandatory) and underscore js (mandatory)

View

View is used to show your data and event. Here is the example :

<!DOCTYPE HTML> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script> </head> <body> <div id="content"> </div> <script> $(document).ready(function() { var FirstView = Backbone.View.extend({ el:"#content", initialize : function(){ this.render(); }, render : function(){ console.log("render"); this.$el.html("This is view"); } }); var firstView = new FirstView(); }); </script> </body> </html>
View Demo

You can use view with event.

<!DOCTYPE HTML> <html> <head> <title>View with Event</title> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script> </head> <body> <div id="content"> </div> <script> $(document).ready(function() { var FirstView = Backbone.View.extend({ el:"#content", initialize : function(){ this.render(); }, events: { "click #btnClick1":"OnClick", "click #btnClick2":"OnClick2" }, OnClick(){ alert('Hi click'); }, OnClick2(){ alert('Hi click2'); }, render : function(){ console.log("render"); this.$el.html('<div><button id="btnClick1">Click1</button></div><div><button id="btnClick2">Click2</button></div>'); } }); var firstView = new FirstView(); }); </script> </body> </html>
View Demo

Model

Model containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control.

<!DOCTYPE HTML> <html> <head> <title>Model Basic</title> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script> </head> <body> <div id="content"> </div> <script> $(document).ready(function() { $(document).ready(function() { var FirstModel = Backbone.Model.extend({ initialize:function(){ console.log("This is our first model"); } }); var firstModel = new FirstModel(); firstModel.set({ name:"WPAmaNuke", from:"British", age:30 }); console.log(firstModel.toJSON()); }); }); </script> </body> </html>
View Demo

Model With Validate

<!DOCTYPE HTML> <html> <head> <title>Model With Validate</title> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script> </head> <body> <div id="content"> </div> <script> $(document).ready(function() { var FirstModel = Backbone.Model.extend({ validate: function(attribute){ if (attribute.age<0) { console.log("Age should be more than 0"); return "Age should be more than 0"; } }, initialize:function(){ console.log("This is our first model"); } }); var firstModel = new FirstModel(); firstModel.set({ name:"WPAmaNuke", from:"British", age:-1 }); console.log(firstModel.toJSON()); var ModelView = Backbone.View.extend({ model:firstModel, template: _.template("Name : <%= this.model.get('name') %> ; From : <%= this.model.get('from') %> ; Age : <%= this.model.get('age') %> "), initialize:function(){ console.log("This is our first model"); this.render(); }, render:function(){ this.$el.html(this.template(this.model.toJSON())); console.log("Escape : " + this.model.escape('name')); console.log("Get : " + this.model.get('name')); console.log("JSON : " + this.model.toJSON()); if (this.model.isValid()) { console.log('Valid'); } else { console.log('Not Valid'); } } }); var mView = new ModelView({ el:'#content', model:firstModel }); }); </script> </body> </html>
View Demo

Collection

Model Templating With Underscore

Basic Template

<!DOCTYPE HTML> <html> <head> <title>Basic Template Underscore</title> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script> </head> <body> <div id="content"></div> <script type="text/template" id="eventTemplates"> <div> <button id="btnClick1">Click 1</button> </div> <div> <button id="btnClick2">Click 2</button> </div> </script> <script> $(document).ready(function() { var FirstView = Backbone.View.extend({ el:"#content", template:_.template($('#eventTemplates').html()), initialize : function(){ this.render(); }, events: { "click #btnClick1":"OnClick", "click #btnClick2":"OnClick2" }, OnClick(){ alert('Hi click'); }, OnClick2(){ alert('Hi click2'); }, render : function(){ console.log("render"); this.$el.html(this.template); } }); var firstView = new FirstView(); }); </script> </body> </html>
View Demo

Model Template

<!DOCTYPE HTML> <html> <head> <title>Model Template Underscore</title> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script> </head> <body> <div id="content"></div> <script type="text/x-handlebars-template" id="eventTemplates"> Name : <%= name %> ; Team : <%= team %> </script> <script> $(document).ready(function() { var Player = Backbone.Model.extend({ defaults:{ name:"Dano", team:"ABS", age:26 } }); var fPlayer1 = new Player({ name:"Dano", team:"NBC", age:26 }); var ModelView = Backbone.View.extend({ template: _.template($('#eventTemplates').html()), model:fPlayer1, initialize:function(){ console.log("This is our first model"); this.render(); }, render:function(){ this.$el.html(this.template(this.model.toJSON())); } }); var mView = new ModelView({ el:'#content' }); }); </script> </body> </html>
View Demo

Collection Template

<!DOCTYPE HTML> <html> <head> <title>Collection Template Underscore</title> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script> </head> <body> <div id="content"></div> <script type="text/template" id="tmpl-first"> <% _.each(collection,function(model) { %> <div> Name : <%= model.name %> ; Team : <%= model.team %> ; Age : <%= model.age %> </div> <% }); %> </script> <script> $(document).ready(function() { var Player = Backbone.Model.extend({ defaults:{ name:"Dedi", team:"XXX", age:26 } }); var fPlayer1 = new Player({ name:"Dino", team:"NBC", age:26 }); var fPlayer2 = new Player({ name:"Heno", team:"XBS", age:36 }); var fPlayer3 = new Player({ name:"Viro", team:"RRR", age:40 }); var myCollection = Backbone.Collection.extend({ model:Player }); var myCollectionObj = new myCollection([fPlayer1,fPlayer2,fPlayer3]); var ModelView = Backbone.View.extend({ template: _.template($('#tmpl-first').html()), collection:myCollectionObj, initialize:function(){ console.log("This is our first model"); this.render(); }, render:function(){ this.$el.html(this.template({ collection : this.collection.toJSON() })); } }); var mView = new ModelView({ el:'#content' }); }); </script> </body> </html>
View Demo

Model Templating With HandleBars

Basic Template

<!DOCTYPE HTML> <html> <head> <title>Basic Template Handlebars</title> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script> </head> <body> <div id="content"></div> <script type="text/x-handlebars-template" id="tmpl-handlerbar"> <div> <button id="btnClick1">Click 1</button> </div> <div> <button id="btnClick2">Click 2</button> </div> </script> <script> $(document).ready(function() { var FirstView = Backbone.View.extend({ el: "#content", template: Handlebars.compile($('#tmpl-handlerbar').html()), initialize : function(){ this.render(); }, events: { "click #btnClick1":"OnClick", "click #btnClick2":"OnClick2" }, OnClick(){ alert('Hi click'); }, OnClick2(){ alert('Hi click2'); }, render : function(){ console.log("render"); this.$el.html(this.template); } }); var firstView = new FirstView(); }); </script> </body> </html>
View Demo

Model Template

<!DOCTYPE HTML> <html> <head> <title>Model Template Handlebars</title> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script> </head> <body> <div id="content"></div> <script type="text/x-handlebars-template" id="tmpl-handlerbar"> Name : {{name}} ; Team : {{team}} </script> <script> $(document).ready(function() { var Player = Backbone.Model.extend({ defaults:{ name:"Dano", team:"ABS", age:26 } }); var fPlayer1 = new Player({ name:"Dano", team:"NBC", age:26 }); var ModelView = Backbone.View.extend({ template: Handlebars.compile($('#tmpl-handlerbar').html()), model:fPlayer1, initialize:function(){ console.log("This is our first model"); this.render(); }, render:function(){ this.$el.html(this.template(this.model.toJSON())); } }); var mView = new ModelView({ el:'#content' }); }); </script> </body> </html>
View Demo

Collection Template

<!DOCTYPE HTML> <html> <head> <title>Collection Template Handlebars</title> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script> </head> <body> <div id="content"></div> <script type="text/x-handlebars-template" id="tmpl-handlerbar"> {{#each data}} <div> {{this.name}} from Team {{this.team}} </div> {{/each}} </script> <script> $(document).ready(function() { var Player = Backbone.Model.extend({ defaults:{ name:"Dedi", team:"XXX", age:26 } }); var fPlayer1 = new Player({ name:"Dino", team:"NBC", age:26 }); var fPlayer2 = new Player({ name:"Heno", team:"XBS", age:36 }); var fPlayer3 = new Player({ name:"Viro", team:"RRR", age:40 }); var myCollection = Backbone.Collection.extend({ model:Player }); var myCollectionObj = new myCollection([fPlayer1,fPlayer2,fPlayer3]); var ModelView = Backbone.View.extend({ template: Handlebars.compile($('#tmpl-handlerbar').html()), collection:myCollectionObj, initialize:function(){ console.log("This is our first model"); this.render(); }, render:function(){ console.log(this.collection.toJSON()); this.$el.html(this.template({ data : this.collection.toJSON() })); } }); var mView = new ModelView({ el:'#content' }); }); </script> </body> </html>
View Demo

Route

<!DOCTYPE HTML> <html> <head> <title>Basic Route</title> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script> </head> <body> <div id="content"></div> <div> <ul> <li><a href="#view1">view1</a></li> <li><a href="#view2">view2</a></li> <li><a href="#view3">view3</a></li> </ul> </div> <script> $(document).ready(function() { var View1 = Backbone.View.extend({ el:'#content', initialize:function(){ this.render(); }, render:function(){ this.$el.html('Template 1'); } }); var View2 = Backbone.View.extend({ el:'#content', initialize:function(){ this.render(); }, render:function(){ this.$el.html('Template 2'); } }); var View3 = Backbone.View.extend({ el:'#content', initialize:function(){ this.render(); }, render:function(){ this.$el.html('Template 3'); } }); var ProjectRouter = Backbone.Router.extend({ routes:{ "":"showView1", "view1":"showView1", "view2":"showView2", "view3":"showView3" }, showView1:function(){ var Obj1 = new View1(); }, showView2:function(){ var Obj2 = new View2(); }, showView3:function(){ var Obj3 = new View3(); } }); var myRouter = new ProjectRouter(); Backbone.history.start(); }); </script> </body> </html>
View Demo

Router With Parameter

<!DOCTYPE HTML> <html> <head> <title>Basic Route</title> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script> </head> <body> <div id="content"></div> <div> <ul> <li><a href="#view1">view1</a></li> <li><a href="#view2/26">view2</a></li> <li><a href="#view3/40">view3</a></li> </ul> </div> <script> $(document).ready(function() { var View1 = Backbone.View.extend({ el:'#content', initialize:function(){ this.render(); }, render:function(){ this.$el.html('Template 1'); } }); var View2 = Backbone.View.extend({ el:'#content', initialize:function(){ this.render(); }, render:function(){ this.$el.html('Template 2'); } }); var View3 = Backbone.View.extend({ el:'#content', initialize:function(){ this.render(); }, render:function(){ this.$el.html('Template 3'); } }); var ProjectRouter = Backbone.Router.extend({ routes:{ "":"showView1", "view1":"showView1", "view2/:viewAge2":"showView2", "view3/:viewAge3":"showView3" }, showView1:function(){ var Obj1 = new View1(); }, showView2:function(viewAge2){ console.log(viewAge2); var Obj2 = new View2(); }, showView3:function(viewAge3){ console.log(viewAge3); var Obj3 = new View3(); } }); var myRouter = new ProjectRouter(); Backbone.history.start(); }); </script> </body> </html>
View Demo