BackboneJS - Configuración del entorno

BackboneJS es muy fácil de configurar y trabajar. Este capítulo discutirá la descarga y configuración delBackboneJS Library.

BackboneJS se puede utilizar de las dos formas siguientes:

Descargando la biblioteca de UI de su sitio web oficial.
Descarga de la biblioteca de UI de CDN.

Descargando la biblioteca de UI de su sitio web oficial

Cuando abres el enlace http://backbonejs.org/, podrás ver una captura de pantalla como se muestra a continuación:

Como puede ver, hay tres opciones para descargar esta biblioteca:

Development Version - Haga clic derecho en este botón y guarde como y obtendrá la fuente completa JavaScript library.
Production Version - Haga clic derecho en este botón y guarde como y obtendrá el Backbone-min.js library archivo que está empaquetado y comprimido con gzip.
Edge Version - Haga clic derecho en este botón y guarde como y obtendrá un unreleased version, es decir, el desarrollo está en marcha; por lo tanto, debe usarlo bajo su propio riesgo.

Dependencias

BackboneJS depende de los siguientes archivos JavaScript:

Underscore.js- Esta es la única dependencia dura que debe incluirse. Puedes conseguirlo desde aquí .
jQuery.js- Incluya este archivo para la persistencia RESTful, soporte de historial a través de Backbone.Router y manipulación DOM con Backbone.View. Puedes conseguirlo desde aquí .
json2.js- Incluya este archivo para compatibilidad con Internet Explorer anterior. Puedes conseguirlo desde aquí .

Descargar la biblioteca de IU de CDN

Un CDN o Content Delivery Networkes una red de servidores diseñada para entregar archivos a los usuarios. Si utiliza un enlace CDN en su página web, traslada la responsabilidad de alojar archivos de sus propios servidores a una serie de servidores externos. Esto también ofrece la ventaja de que si el visitante de su página web ya ha descargado una copia de BackboneJS del mismo CDN, no tendrá que volver a descargarla.

Como se dijo anteriormente, BackboneJS tiene una dependencia del siguiente JavaScript:

jQuery
Underscore

Por lo tanto, CDN para todo lo anterior es el siguiente:

<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 - Estamos utilizando las versiones CDN de la biblioteca a lo largo de este tutorial.

Ejemplo

Creemos un ejemplo simple 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>

Los comentarios del código se explican por sí mismos. A continuación se dan algunos detalles más:

Hay un código html al comienzo de la etiqueta del cuerpo.

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

Esto imprime Loading...

A continuación, hemos agregado las siguientes 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>

A continuación, tenemos el siguiente 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();

Los comentarios se explican por sí mismos. En la última línea, estamos inicializandonew AppView(). Esto imprimirá el "Hello TutorialsPoint" en eldiv with id = "container"

Guardar esta página como myFirstExample.html. Abra esto en su navegador y la pantalla mostrará el siguiente texto.

↰ Previous page Next page ↱