BackboneJS - Configuration de l'environnement

BackboneJS est très facile à installer et à utiliser. Ce chapitre traite du téléchargement et de la configuration duBackboneJS Library.

BackboneJS peut être utilisé des deux manières suivantes -

  • Téléchargement de la bibliothèque d'interface utilisateur depuis son site officiel.
  • Téléchargement de la bibliothèque d'interface utilisateur à partir de CDN.

Téléchargement de la bibliothèque d'interface utilisateur depuis son site officiel

Lorsque vous ouvrez le lien http://backbonejs.org/, vous verrez une capture d'écran comme indiqué ci-dessous -

Comme vous pouvez le voir, il existe trois options pour télécharger cette bibliothèque -

  • Development Version - Faites un clic droit sur ce bouton et enregistrez-le sous et vous obtenez la source complète JavaScript library.

  • Production Version - Faites un clic droit sur ce bouton et enregistrez sous et vous obtenez le Backbone-min.js library fichier qui est compressé et compressé.

  • Edge Version - Faites un clic droit sur ce bouton et enregistrez sous et vous obtenez un unreleased version, c'est-à-dire que le développement est en cours; vous devez donc l'utiliser à vos propres risques.

Dépendances

BackboneJS dépend des fichiers JavaScript suivants -

  • Underscore.js- C'est la seule dépendance dure qui doit être incluse. Vous pouvez l'obtenir d' ici .

  • jQuery.js- Incluez ce fichier pour la persistance RESTful, la prise en charge de l'historique via Backbone.Router et la manipulation DOM avec Backbone.View. Vous pouvez l'obtenir d' ici .

  • json2.js- Incluez ce fichier pour la prise en charge d'Internet Explorer plus ancienne. Vous pouvez l'obtenir d' ici .

Télécharger la bibliothèque d'interface utilisateur à partir de CDN

Un CDN ou Content Delivery Networkest un réseau de serveurs conçu pour servir des fichiers aux utilisateurs. Si vous utilisez un lien CDN dans votre page Web, il transfère la responsabilité de l'hébergement des fichiers de vos propres serveurs vers une série de serveurs externes. Cela offre également un avantage: si le visiteur de votre page Web a déjà téléchargé une copie de BackboneJS à partir du même CDN, il n'aura pas à être retéléchargé.

Comme indiqué ci-dessus, BackboneJS a une dépendance du JavaScript suivant -

  • jQuery
  • Underscore

Par conséquent CDN pour tout ce qui précède est le suivant -

<script type = "text/javascript" 
   src = "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type = "text/javascript"
   src = "https://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type = "text/javascript"
   src = "https://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

Note - Nous utilisons les versions CDN de la bibliothèque tout au long de ce tutoriel.

Exemple

Créons un exemple simple en utilisant BackboneJS.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1">
      <title>Hello World using Backbone.js</title>
   </head>
   
   <body>
      <!-- ========= -->
      <!-- Your HTML -->
      <!-- ========= -->
      <div id = "container">Loading...</div>
      <!-- ========= -->
      <!-- Libraries -->
      <!-- ========= -->
      <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.3.3/underscore-min.js"
         type = "text/javascript"></script>
         
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
         type = "text/javascript"></script>
      <!-- =============== -->
      <!-- Javascript code -->
      <!-- =============== -->
      
      <script type = "text/javascript">
         var AppView = Backbone.View.extend ({
            // el - stands for element. Every view has an element associated with HTML content, will be rendered. 
            el: '#container',
            
            // It's the first function called when this view is instantiated.
            initialize: function() {
               this.render(); 
            },
            
            // $el - it's a cached jQuery object (el), in which you can use jQuery functions to push content.
            
            //Like the Hello TutorialsPoint in this case.
            render: function() {
               this.$el.html("Hello TutorialsPoint!!!");
            }
         });
         var appView = new AppView();
      </script>
      
   </body>
</html>

Les commentaires de code sont explicites. Quelques détails supplémentaires sont donnés ci-dessous -

Il y a un code html au début de la balise body

<div id = "container">Loading...</div>

Cette imprime Loading...

Ensuite, nous avons ajouté les CDN suivants

<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.3.3/underscore-min.js"
   type = "text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"
   type = "text/javascript"></script>

Ensuite, nous avons le script suivant -

var AppView = Backbone.View.extend ({
   
   // el - stands for element. Every view has an element associated with HTML content,
   //will be rendered. 
   el: '#container', 

   // It's the first function called when this view is instantiated. 
   initialize: function() { 
      this.render(); 
   }, 

   // $el - it's a cached jQuery object (el), in which you can use jQuery functions to push content.
   
   //Like the Hello World in this case. 
   render: function() { 
      this.$el.html("<h1>Hello TutorialsPoint!!!</h1>"); 
   } 
});  
var appView = new AppView();

Les commentaires sont explicites. Dans la dernière ligne, nous initialisonsnew AppView(). Cela imprimera le "Hello TutorialsPoint" dans lediv with id = "container"

Enregistrer cette page sous myFirstExample.html. Ouvrez-le dans votre navigateur et l'écran affichera le texte suivant.