Skip to main content

Hello World : Backbone.js

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.






Comments

Popular posts from this blog

Create Table in Liquibase

For creating table using liquibase you can use below code and add it in your liquibase file. <createTable tableName=“employee”>      <column name="id" type="int">      <constraints primaryKey="true" nullable="false"/>   </column>      <column name="first_name" type="varchar(255)"/>   <column name="last_name" type="varchar(255)"/>   <column name="username" type="varchar(255)">      <constraints unique="true" nullable="false"/>   </column> </createTable> The use is pretty simple it's the way it looks : Tag: <createTable></createTable> This is an opening/ending tag for creating a table. These tags will enclose column sub tags which will define columns for the table. Attribute:   tableName : Name of the table which you want to create. (This is a mandatory   ...

How databasechangeloglock and databasechangelog table used by liquibase?

Liquibase takes care of executing the query on the database while maintaining the list of queries executed and also maintaining the locks over the tables simultaneously. The two tables that are used by the liquibase for this purpose are : Databasechangeloglock : This table have following columns ID | LOCKED| LOCKGRANTED | LOCKEDBY. This maintains the locks information granted to the user. The primary purpose of this table is to make sure that two machines don't attempt to modify the data at the same time. Databasechangelog : This table have following columns ID | AUTHOR | FILENAME | DATEEXECUTED | ORDEREXECUTED | EXECTYPE | MD5SUM | DESCRIPTION | COMMENTS | TAG | LIQUIBASE This table maintains the list of the statements that are executed on the database.

Carnivorous Island from "Life of PI"

Yann Martel described about an floating carnivorous Island for symbolizing that something seemingly good in life can turn out to be harmful, so we should keep going with our journey of life... About the carnivorous Island from movie. In the movie 'Life of PI' after PI struggles to live in the pacific with the Bengal tiger suddenly one morning Pi  found himself at a Island. After spending so many days in the middle of the sea he found himself very lucky to find a Island. After spending some time he thought might be this was the end of his suffering and he can spend rest of his life at that island. He makes h is bed on a tree and sleeps there, in the middle of the night he wakes up and find that there were dead fish in the fresh water where he took swim in the day time. While trying to understand the mystery he plucks a fruit from the same tree and peel it off and finds a human tooth inside that fruit and then he realize that it was an carnivorous Island. The...