Firstly, a brief introduction about Backbone.js.
Backbone.js is a very light weight javascript framework which allows you to organize your code in a MVC fashion.
In conventional methods we use to keep on adding javascript code in the jsp or in separate js files at first this method looks simple and well organized but afterwards it's a pain to keep the code organized. Here backbone.js comes to rescue. It avoids all Javascript spaghetti and let you arrange your code in MVC fashion i.e. you have Model, View and Controller.
Model : This basically let you retrieve the data and populates it.
View : It's nothing but what you will be showing on GUI (Graphical User Interface).
Controller : In this case it lets you save the state of the application via a hashback URL.
We will have more information on the Controller in later post. For now, let's just concentrate on Hello world program.
Backbone.js allows you to develop a single page application that means there is a single html file and all of your other pages will be rendered in this page.
Step 1. Create a html file and paste the below code in that file
---------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>helloWorldBackbonejs</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
---------------------------------------------------------------
Step 2. Create a javascript file and let's name this file as index.js. copy below contents and paste it in this newly created file.
//---------------------------------------------------------------
(function($){
var ListView = Backbone.View.extend({
el: $('body'),
initialize: function(){
_.bindAll(this, 'render');
this.render();
},
render: function(){
$(this.el).append("<table border='1' height='130' width='130'><tr><td align='center'>Hello World</td></tr></table>");
}
});
var listView = new ListView();
})(jQuery);
//---------------------------------------------------------------
This javascript only consist of View. So when the html file is opened in a browser it will load all the JS files included and then will load index.js. When a new instance of ListView is created i.e
var listView = new ListView();
will call the initialize function.
If we are overriding the initialize method then whenever the new instance is created for that object it will call the initialize() method by default.
el.$('body') : will render the View contents in body tag.
Since, this is just to get you start up. Will include much in my other upcoming posts.
Do comment if anything is not clear from above example.
Backbone.js is a very light weight javascript framework which allows you to organize your code in a MVC fashion.
In conventional methods we use to keep on adding javascript code in the jsp or in separate js files at first this method looks simple and well organized but afterwards it's a pain to keep the code organized. Here backbone.js comes to rescue. It avoids all Javascript spaghetti and let you arrange your code in MVC fashion i.e. you have Model, View and Controller.
Model : This basically let you retrieve the data and populates it.
View : It's nothing but what you will be showing on GUI (Graphical User Interface).
Controller : In this case it lets you save the state of the application via a hashback URL.
We will have more information on the Controller in later post. For now, let's just concentrate on Hello world program.
Backbone.js allows you to develop a single page application that means there is a single html file and all of your other pages will be rendered in this page.
Step 1. Create a html file and paste the below code in that file
---------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>helloWorldBackbonejs</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
---------------------------------------------------------------
Step 2. Create a javascript file and let's name this file as index.js. copy below contents and paste it in this newly created file.
//---------------------------------------------------------------
(function($){
var ListView = Backbone.View.extend({
el: $('body'),
initialize: function(){
_.bindAll(this, 'render');
this.render();
},
render: function(){
$(this.el).append("<table border='1' height='130' width='130'><tr><td align='center'>Hello World</td></tr></table>");
}
});
var listView = new ListView();
})(jQuery);
//---------------------------------------------------------------
This javascript only consist of View. So when the html file is opened in a browser it will load all the JS files included and then will load index.js. When a new instance of ListView is created i.e
var listView = new ListView();
will call the initialize function.
If we are overriding the initialize method then whenever the new instance is created for that object it will call the initialize() method by default.
el.$('body') : will render the View contents in body tag.
Since, this is just to get you start up. Will include much in my other upcoming posts.
Do comment if anything is not clear from above example.
Comments
Post a Comment
.