What is Backbone.js ?
Backkbone.js is a JavaScript library that let us create Single-Page Applications (SPAs) in structured manner. Backbone.js is based on Model-View-Controller (MVC) design pattern. It is suitable for creating Single-Page Applications (SPAs) using RESTful services for persisting data.
Components in Backbone.js-
Unlike traditional MVC which have three components, Backbone has following main components-
- Model
- View
- Collection
- Routers
- Model- Working on Data is the most important part of any application. Each application requires a to organise the Data in a structured way. Backbone Models provide us to manage all our entities. Backbone.Model by default provides the way to persists the data. Backbone.Model also provides the functionality to validate the data before persisting it.
var SampleModel= Backbone.Model.extend({
initialize : fuction(){
};
});
- View- Backbone Views used to display data model on UI. They are also used to listen the HTML element events and populating and rendering the views based on data.
var SampleView=Backbone.View.extend({
initialize : function(){
};
});
- Collection- Backbone Collections are simply a group of models. It can be used in situation such as-
Model: Student Collection : ClasStudents
Model: Animals Collection: Zoo
var SampleCollection= Backbone.Collection.extend({
model : SampleModel
});
- Routers- Backbone routers are used for routing your applications URL’s and execute code based on the requested URL and then render the view to the user.
Set Up for Backbone.js-
Backbone.js has a hard dependency on Underscore.js and soft dependency on jQuery. You need below libraries to include in your application-
- Backbone.js- You can download the Backbone.js from http://backbonejs.org/.
- Underscore.js- You can download this library from http://underscorejs.org/.
- jQuery- Download the jQuery library from http://jquery.com/.
After downloading the above libraries include these library in your application's Main HTML page (here I have created
main.html page).
<html>
<HTML>
<Head>
<title>Backbone js Tutorial-Todo List</title>
</Head>
<Body>
<script src="scripts/underscore-min.js"></script>
<script src="scripts/jquery-1.11.3.min.js"></script>
<script src="scripts/backbone-min.js"></script>
</Body>
</HTML>;
CodeProject
No comments:
Post a Comment