BackboneJS - Configurazione dell'ambiente

BackboneJS è molto facile da configurare e utilizzare. Questo capitolo discuterà il download e la configurazione diBackboneJS Library.

BackboneJS può essere utilizzato nei seguenti due modi:

  • Download della libreria dell'interfaccia utente dal suo sito Web ufficiale.
  • Download della libreria dell'interfaccia utente da CDN.

Download della libreria dell'interfaccia utente dal suo sito Web ufficiale

Quando apri il link http://backbonejs.org/, vedrai uno screenshot come mostrato di seguito -

Come puoi vedere, ci sono tre opzioni per il download di questa libreria:

  • Development Version - Fare clic con il pulsante destro del mouse su questo pulsante e salvare con nome per ottenere la fonte completa JavaScript library.

  • Production Version - Fare clic con il tasto destro su questo pulsante e salvare con nome e si ottiene il file Backbone-min.js library file che è compresso e compresso con gzip.

  • Edge Version - Fare clic con il tasto destro su questo pulsante e salvare con nome e si ottiene un file unreleased version, cioè, lo sviluppo è in corso; quindi è necessario utilizzarlo a proprio rischio.

Dipendenze

BackboneJS dipende dai seguenti file JavaScript:

  • Underscore.js- Questa è l'unica dipendenza difficile che deve essere inclusa. Puoi ottenerlo da qui .

  • jQuery.js- Includere questo file per la persistenza RESTful, il supporto della cronologia tramite Backbone.Router e la manipolazione DOM con Backbone.View. Puoi ottenerlo da qui .

  • json2.js- Includere questo file per il supporto di Internet Explorer precedente. Puoi ottenerlo da qui .

Scarica la libreria dell'interfaccia utente da CDN

Un CDN o Content Delivery Networkè una rete di server progettata per fornire file agli utenti. Se si utilizza un collegamento CDN nella propria pagina Web, si sposta la responsabilità di ospitare i file dai propri server a una serie di quelli esterni. Questo offre anche un vantaggio che se il visitatore della tua pagina web ha già scaricato una copia di BackboneJS dallo stesso CDN, non dovrà essere scaricata nuovamente.

Come detto sopra, BackboneJS ha una dipendenza dal seguente JavaScript:

  • jQuery
  • Underscore

Quindi CDN per tutto quanto sopra è il seguente:

<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 - Stiamo utilizzando le versioni CDN della libreria durante questo tutorial.

Esempio

Creiamo un semplice esempio usando 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>

I commenti sul codice sono autoesplicativi. Di seguito vengono forniti alcuni dettagli in più:

C'è un codice html all'inizio del tag body

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

Questo stampa Loading...

Successivamente, abbiamo aggiunto i seguenti 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.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>

Successivamente, abbiamo il seguente script:

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();

I commenti sono autoesplicativi. Nell'ultima riga, stiamo inizializzandonew AppView(). Questo stamperà "Hello TutorialsPoint" nel filediv with id = "container"

Salva questa pagina come myFirstExample.html. Aprilo nel tuo browser e lo schermo mostrerà il testo seguente.