Thursday, 7 June 2018

002 BackboneJS Setup

BackboneJS is a JavaScript library. No installation is required. You can use BackboneJS by downloading the library or add link of CDN  to the project page. You can download library from official website of BackboneJS or you can download it CDN.
  1. Downloading library from official website.
  2. Downloading library from CDNs.
The advantage of CDN download is that, once in library downloaded from CDN , when the visitor came to that page again no need to download again because the copy of that previous download already there.




You can download BackboneJS library from http://backbonejs.org/, you have noticed that ,there are three option for download.

Development Version : Development Versus gives us the full JavaScript library source ,you can right click and choose "Save as" option to get the development version.

Production Version :
Production Version is the minified version of BackboneJS .You will notice file size is too small compared to the development version. This makes file to download faster when application runs, time consume for download is almost negligible.

Edge Version : Edge Version is under development, message inform you , that you can use it at your own risk, the version is not released yet. To download this version , just right click and choose "Save as" option.



BackboneJS has dependencies

Underscore.js − Hard dependency which must to be included. 


jQuery.js − For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View. 


json2.js − For older Internet Explorer support. 


Here is the link you need to include in your application , if you are using CDN    

<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript"></script>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript"></script>
      

   

BackboneJS Simple Application Step by Step

1)Write the page HTML


<!DOCTYPE html>
<html>
<head>
<title>Model Example</title>
....
...
</head>
</html>


2)Include the  BackboneJS library



<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript"></script>
<script type="text/javascript">

3) Add BackboneJS Code

<script type="text/javascript">

   var myObj = Backbone.Model.extend({ message: "Hellow World" });

   var myObj2 = new myObj();

    document.write(myObj2.message);
</script>


Now the Complted Source is here

<!DOCTYPE html>
<html>
<head>
<title>Model Example</title>

            <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"
type="text/javascript"></script>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"
type="text/javascript"></script>


<script type="text/javascript">

         var myObj = Backbone.Model.extend({ message: "Hellow World" });

         var myObj2 = new myObj();

        document.write(myObj2.message);
</script>

</head>
</html>

 
Output :




No comments:

Post a Comment

বাঙালির বেড়ানো সেরা চারটি ঠিকানা

  বাঙালি মানে ঘোড়া পাগল | দু একদিন ছুটি পেলো মানে বাঙালি চলল ঘুরতে | সে সমুদ্রই হোক , পাহাড়ি হোক বা নদী হোক। বাঙালির ...