BackboneJS - Guía rápida

BackboneJS es un lightweight JavaScript libraryque permite desarrollar y estructurar las aplicaciones del lado del cliente que se ejecutan en un navegador web. Ofrece un marco MVC que abstrae datos en modelos, DOM en vistas y vincula estos dos mediante eventos.

History- backbone.js fue desarrollado por Jeremy Ashkenas y fue lanzado inicialmente de octubre 13 ª de 2010.

Cuando usar Backbone

  • Considere que está creando una aplicación con numerosas líneas de código usando JavaScript o jQuery. En esta aplicación, si usted -

    • agregar o reemplazar elementos DOM a la aplicación o

    • hacer algunas solicitudes o

    • mostrar animación en la aplicación o

    • agregue más líneas a su código,

    entonces su aplicación podría complicarse.

  • Si desea un mejor diseño con menos código, entonces es mejor utilizar la biblioteca BackboneJS que proporciona una buena funcionalidad, está bien organizada y estructurada para desarrollar su aplicación.

  • BackboneJS se comunica a través de eventos; esto asegura que no estropee la aplicación. Su código será más limpio, agradable y fácil de mantener.

Caracteristicas

La siguiente es una lista de características de BackboneJS:

  • BackboneJS permite el desarrollo de aplicaciones y el frontend de una manera mucho más sencilla mediante el uso de funciones de JavaScript.

  • BackboneJS proporciona varios componentes básicos, como modelos, vistas, eventos, enrutadores y colecciones para ensamblar las aplicaciones web del lado del cliente.

  • Cuando un modelo cambia, actualiza automáticamente el HTML de su aplicación.

  • BackboneJS es una biblioteca simple que ayuda a separar la lógica de la interfaz de usuario y la empresarial.

  • Es una biblioteca gratuita y de código abierto y contiene más de 100 extensiones disponibles.

  • Actúa como una columna vertebral para su proyecto y ayuda a organizar su código.

  • Gestiona el modelo de datos que incluye los datos del usuario y muestra esos datos en el lado del servidor con el mismo formato escrito en el lado del cliente.

  • BackboneJS tiene una dependencia suave con jQuery y una dura dependencia con Underscore.js.

  • Permite crear aplicaciones web del lado del cliente o aplicaciones móviles en un formato bien estructurado y organizado.

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.

BackboneJS proporciona una estructura a las aplicaciones web que permite separar la lógica empresarial y la lógica de la interfaz de usuario. En este capítulo, analizaremos el estilo arquitectónico de la aplicación BackboneJS para implementar interfaces de usuario. El siguiente diagrama muestra la arquitectura de BackboneJS:

La arquitectura de BackboneJS contiene los siguientes módulos:

  • Solicitud HTTP
  • Router
  • View
  • Events
  • Model
  • Collection
  • Fuente de datos

Analicemos ahora todos los módulos en detalle.

Solicitud HTTP

El cliente HTTP envía una solicitud HTTP a un servidor en forma de mensaje de solicitud donde los navegadores web, motores de búsqueda, etc., actúan como clientes HTTP. El usuario solicita un archivo como documentos, imágenes, etc., utilizando el protocolo de solicitud HTTP. En el diagrama anterior, puede ver que el cliente HTTP usa el enrutador para enviar la solicitud del cliente.

Enrutador

Se utiliza para enrutar las aplicaciones del lado del cliente y las conecta a acciones y eventos mediante URL. Es una representación URL de los objetos de la aplicación. Esta URL la cambia manualmente el usuario. La red troncal utiliza la URL para que pueda comprender qué estado de la aplicación se enviará o presentará al usuario.

El enrutador es un mecanismo que puede copiar las URL para llegar a la vista. El enrutador es necesario cuando las aplicaciones web proporcionan URL enlazables, marcables y compartibles para ubicaciones importantes en la aplicación.

En la arquitectura anterior, el enrutador envía una solicitud HTTP a la vista. Es una característica útil cuando una aplicación necesita capacidad de enrutamiento.

Ver

Las vistas de BackboneJS son responsables de cómo y qué mostrar desde nuestra aplicación y no contienen marcado HTML para la aplicación. Especifica una idea detrás de la presentación de los datos del modelo al usuario. Las vistas se utilizan para reflejar "cómo se ve su modelo de datos".

Las clases de vista no saben nada sobre HTML y CSS y cada vista se puede actualizar de forma independiente cuando cambia el modelo sin recargar toda la página. Representa la parte lógica de la interfaz de usuario en el DOM.

Como se muestra en la arquitectura anterior, la Vista representa la interfaz de usuario que es responsable de mostrar la respuesta a la solicitud del usuario realizada mediante el enrutador.

Eventos

Los eventos son la parte principal de cualquier aplicación. Vincula los eventos personalizados del usuario a una aplicación. Se pueden mezclar en cualquier objeto y son capaces de vincular y activar eventos personalizados. Puede vincular los eventos personalizados utilizando el nombre deseado de su elección.

Normalmente, los eventos se manejan sincrónicamente con el flujo de su programa. En la arquitectura anterior, puede ver cuándo ocurre un evento, representa los datos del modelo mediante el uso de View.

Modelo

Es el corazón de la aplicación JavaScript que recupera y llena los datos. Los modelos contienen datos de una aplicación, la lógica de los datos y representan el objeto de datos básicos en el marco.

Los modelos representan entidades comerciales con cierta lógica comercial y validaciones comerciales. Se utilizan principalmente para almacenamiento de datos y lógica empresarial. Los modelos se pueden recuperar y guardar en el almacenamiento de datos. Un modelo toma la solicitud HTTP de los eventos pasados ​​por la vista utilizando el enrutador, sincroniza los datos de la base de datos y envía la respuesta al cliente.

Colección

Una colección es un conjunto de modelos que vincula eventos, cuando el modelo se ha modificado en la colección. La colección contiene una lista de modelos que se pueden procesar en el ciclo y admite clasificación y filtrado. Al crear una colección, podemos definir qué tipo de modelo va a tener esa colección junto con la instancia de propiedades. Cualquier evento que se active en un modelo también se activará en la colección del modelo.

También toma la solicitud de la vista, vincula eventos y sincroniza los datos con los datos solicitados y envía la respuesta al cliente HTTP.

Fuente de datos

Es la conexión establecida a una base de datos desde un servidor y contiene la información que se solicita al cliente. El flujo de la arquitectura BackboneJS se puede describir como se muestra en los siguientes pasos:

  • Un usuario solicita los datos usando el enrutador, que enruta las aplicaciones a los eventos usando las URL.

  • La vista representa los datos del modelo para el usuario.

  • El modelo y la colección recuperan y rellenan los datos de la base de datos vinculando eventos personalizados.

En el próximo capítulo, comprenderemos la importancia de los eventos en BackboneJS.

Los eventos son capaces de vincular objetos y desencadenar eventos personalizados, es decir, puede vincular los eventos personalizados utilizando el nombre deseado de nuestra elección.

La siguiente tabla enumera todos los métodos que puede utilizar para manipular los eventos BackboneJS:

S.No. Métodos y descripción
1 en

Vincula un evento a un objeto y ejecuta la devolución de llamada cada vez que se activa un evento.
2 apagado

Elimina las funciones de devolución de llamada o todos los eventos de un objeto.
3 desencadenar

Invoca las funciones de devolución de llamada para los eventos dados.
4 una vez

Extiende la clase backbone.Model mientras crea su propio modelo backbone.
5 escucha a

Informa a un objeto que escuche un evento en otro objeto.
6 deja de escuchar

Se puede usar para dejar de escuchar eventos en los otros objetos.
7 listenToOnce

Hace que listenTo ocurra solo una vez antes de que se elimine la función de devolución de llamada.

Catálogo de eventos integrados

BackboneJS permite el uso de eventos globales siempre que sea necesario en su aplicación. Contiene algunos de los eventos integrados con argumentos como se muestra en la siguiente tabla:

S.No. Eventos y descripción
1

"add"(model, collection, options)

Se usa cuando se agrega un modelo a la colección.
2

"remove"(model, collection, options)

Elimina un modelo de la colección.
3

"reset"(collection, options)

Se utiliza para restablecer el contenido de la colección.
4

"sort"(collection, options)

Se utiliza cuando es necesario recurrir a una colección.
5

"change"(model, options)

Se utiliza cuando se deben realizar cambios en los atributos de un modelo.
6

"change:[attribute]"(model, value, options)

Se usa cuando hay una actualización en un atributo.
7

"destroy"(model, collection, options)

Se dispara cuando se destruye el modelo.
8

"request"(model_or_collection, xhr, options)

Se utiliza cuando un modelo o una colección comienza a solicitar al servidor.
9

"sync"(model_or_collection, resp, options)

Se utiliza cuando un modelo o una colección se sincroniza correctamente con el servidor.
10

"error"(model_or_collection, resp, options)

Se activa cuando hay un error en la solicitud al servidor.
11

"invalid"(model, error, options)

Cuando hay un error en la validación del modelo, devuelve no válido.
12

"route:[name]"(params)

Cuando hay una coincidencia de ruta específica, se puede utilizar este evento.
13

"route"(route,params)

Se utiliza cuando hay coincidencia con alguna ruta.
14

"route"(router, route, params)

El historial lo usa cuando hay una coincidencia con cualquier ruta.
15

"all"

Se dispara para todos los eventos activados por el nombre del evento que pasa como primer argumento.

Los modelos contienen datos dinámicos y su lógica. Lógicas como conversiones, validaciones, propiedades calculadas y control de acceso se incluyen en la categoría Modelo. Como contiene todos los datos de la aplicación, un modelo también se denomina comoheart of JavaScript application.

La siguiente tabla enumera todos los métodos que puede utilizar para manipular el modelo BackboneJS:

S.No. Métodos y descripción
1 ampliar

Extiende el backbone.Model class mientras crea su propio modelo troncal.
2 inicializar

Cuando se crea una instancia de modelo, se llama al constructor de la clase y se invoca definiendo la función de inicialización cuando se crea el modelo.
3 obtener

Obtiene el valor de un atributo en el modelo.
4 conjunto

Establece el valor de un atributo en el modelo.
5 escapar

Es como el get función, pero devuelve la versión de escape HTML del atributo de un modelo.
6 tiene

Devuelve verdadero, si el valor del atributo se define con un valor no nulo o un valor no indefinido.
7 desarmado

Elimina un atributo de un modelo de red troncal.
8 claro

Elimina todos los atributos, incluido el atributo id de un modelo de red troncal.
9 carné de identidad

Identifica de forma exclusiva la entidad del modelo, que puede configurarse manualmente cuando se crea o se completa un modelo o cuando se guarda un modelo en el servidor.
10 idAttribute

Define el identificador único de un modelo que contiene el nombre del miembro de la clase que se utilizará como id.
11 cid

Es una identificación de cliente generada automáticamente por Backbone que identifica de forma única el modelo en el cliente.
12 atributos

Los atributos definen la propiedad de un modelo.
13 cambiado

Cambia todos los atributos que han cambiado después de configurar los atributos usando el set() método.
14 valores predeterminados

Establece un valor predeterminado para un modelo, lo que significa que si el usuario no especifica ningún dato, el modelo no caerá con una propiedad vacía.
15 toJSON

Devuelve una copia de los atributos como un objeto para la cadena JSON.
dieciséis sincronizar

Se utiliza para comunicarse con el servidor y representar el estado de un modelo.
17 ir a buscar

Acepta los datos del servidor delegando sync() método en el modelo.
18 salvar

Guarda los datos del modelo delegando a sync() método que lee y guarda el modelo cada vez que un Backbone lo llama.
19 destruir

Destruye o elimina el modelo del servidor utilizando el Backbone.sync método que delega la solicitud HTTP "eliminar".
20 validar

Si la entrada no es válida, devuelve un mensaje de error especificado o si la entrada es válida, no especifica nada y simplemente muestra el resultado.
21 Error de validacion

Muestra el error de validación, si la validación falla o después de la invalid se activa el evento.
22 es válido

Comprueba el estado del modelo mediante el validate() método y también verifica las validaciones para cada atributo.
23 url

Se utiliza para la instancia del modelo y devuelve la URL donde se encuentra el recurso del modelo.
24 urlRoot

Habilita la función de URL mediante el uso de la identificación del modelo para generar la URL.
25 analizar gramaticalmente

Devuelve los datos del modelo pasando a través del objeto de respuesta y representa los datos en formato JSON.
26 clon

Se utiliza para crear una copia profunda de un modelo o para copiar un objeto de modelo a otro objeto.
27 ha cambiado

Devuelve verdadero, si el atributo se cambia desde el último set.
28 es nuevo

Determina si el modelo es nuevo o existente.
29 ChangeAttributes

Devuelve los atributos del modelo que han cambiado desde la última set o se vuelve falso, si no hay atributos.
30 anterior

Determina el valor anterior del atributo modificado.
31 previousAttributes

Devuelve el estado de todos los atributos antes del último evento de cambio.

Métodos de subrayado

Hay seis Underscore.js métodos que proporcionan su funcionalidad para ser utilizados en Backbone.Model.

S.No. Métodos y descripción
1

_.keys(object)

Se utiliza para acceder a las propiedades enumerables del objeto.
2

_.values(object)

Se utiliza para obtener valores de las propiedades del objeto.
3

_.pairs(object)

Describe las propiedades del objeto en términos de pares clave-valor.
4

_.invert(object)

Devuelve la copia del objeto, en el que las claves se han convertido en valores y viceversa.
5

_.pick(object, *keys)

Devuelve la copia del objeto e indica qué llaves recoger.
6

_.omit(object, *keys)

Devuelve la copia del objeto e indica qué claves omitir.

Las colecciones son conjuntos ordenados de modelos. Solo necesitamos ampliar la clase de colección de la red troncal para crear nuestra propia colección. Cualquier evento que se active en un modelo de una colección también se activará directamente en la colección. Esto le permite escuchar cambios en atributos específicos en cualquier modelo de una colección.

La siguiente tabla enumera todos los métodos que puede utilizar para manipular la colección BackboneJS:

S.No. Métodos y descripción
1 ampliar

Extiende la clase de colección de la red troncal para crear una colección.
2 modelo

Para especificar la clase de modelo, necesitamos anular la propiedad de modelo de la clase de colección.
3 inicializar

Cuando se crea una instancia de modelo, se invoca definiendo la función de inicialización cuando se crea la colección.
4 modelos

Matriz de modelos que se crean dentro de la colección.
5 toJSON

Devuelve la copia de los atributos de un modelo utilizando el formato JSON en la colección.
6 sincronizar

Representa el estado del modelo y usa Backbone.sync para mostrar el estado de la colección.
7 añadir

Agregue un modelo o una matriz de modelos a la colección.
8 eliminar

Elimina un modelo o una matriz de modelos de la colección.
9 Reiniciar

Restablece la colección y se llena con una nueva matriz de modelos o vaciará toda la colección.
10 conjunto

Se utiliza para actualizar la colección con un conjunto de elementos en un modelo. Si se encuentra algún modelo nuevo, los elementos se agregarán a ese modelo.
11 obtener

Se utiliza para recuperar el modelo de una colección utilizando el idor cid.
12 a

Recupere el modelo de una colección utilizando el índice especificado.
13 empujar

Es similar al método add () que toma la matriz de modelos y empuja los modelos a la colección.
14 popular

Es similar al método remove () que toma la matriz de modelos y elimina los modelos de la colección.
15 cambiar de turno

Agregue un modelo específico al comienzo de una colección.
dieciséis cambio

Elimina el primer elemento de la colección.
17 rebanada

Muestra la copia superficial de los elementos del modelo de colección.
18 longitud

Cuenta el número de modelos de la colección.
19 comparador

Se utiliza para clasificar los elementos de la colección.
20 ordenar

Ordena los elementos de la colección y usa la propiedad del comparador para ordenar los elementos.
21 arrancar

Recupera los atributos del modelo de la colección.
22 dónde

Se utiliza para mostrar el modelo utilizando el atributo coincidente en la colección.
23 encontrar donde

Devuelve el modelo que coincide con el atributo especificado en la colección.
24 url

Crea una instancia de la colección y devuelve dónde se encuentran los recursos.
25 analizar gramaticalmente

Devuelve los datos de la colección pasando a través del objeto de respuesta y representa los datos en formato JSON.
26 clon

Devuelve la copia superficial del objeto especificado.
27 ir a buscar

Extrae los datos del modelo en la colección utilizando el método de sincronización.
28 crear

Crea una nueva instancia del modelo en la colección.

Métodos de subrayado

La siguiente tabla enumera los Underscore.js métodos que proporcionan su funcionalidad para ser utilizado en el Backbone.Collection.

S.No. Métodos y descripción
1

_.each(list, iteratee, [context])

Itera cada uno de los elementos de la colección utilizando la función iteratee.
2

_.map(list, iteratee, [context])

Mapea cada valor y los muestra en una nueva matriz de valores usando el iteratee función.
3

_.reduce(list, iteratee, memo, [context])

Reduce la lista de valores a un solo valor y también se conoce como inject y foldl.
4

_.reduceRight(list, iteratee, memo, [context])

Es la versión asociativa correcta de reduce.
5

_.find(list, predicate, [context])

Encuentra cada valor y devuelve el primero que pasa el predicado o la prueba.
6

_.filter(list, predicate, [context])

Filtra cada valor y devuelve la matriz de valores que pasa el predicado o la prueba.
7

_.reject(list, predicate, [context])

Devuelve los elementos rechazados en la lista que no pasan los valores predichos.
8

_.every(list, predicate, [context])

Devuelve verdadero si los elementos de la lista pasan los valores predichos.
9

_.some(list, predicate, [context])

Devuelve verdadero si los elementos de la lista pasan los valores predichos.
10

_.contains(list, value, [fromIndex])

Devuelve verdadero, si hay un valor presente en la lista.
11

_.invoke(list, methodName, *arguments)

Invoca el nombre del método usando methodName() en cada valor de la lista.
12

_.max(list, [iteratee], [context])

Especifica el valor máximo en la lista.
13

_.min(list, [iteratee], [context])

Especifica el valor mínimo en la lista.
14

_.sortBy(list, [iteratee], [context])

Devuelve los elementos ordenados en orden ascendente utilizando iteratee en la lista.
15

_.groupBy(list, [iteratee], [context])

Divide los valores de la colección en conjuntos, agrupados mediante el iteratee en la lista.
dieciséis

_.shuffle(list)

Devuelve la copia aleatoria de la lista.
17

_.toArray(list)

Define una matriz de la lista.
18

_.size(list)

Define el número de valores de la lista.
19

_.first(array, [n])

Especifica el primer elemento de la matriz en la lista.
20

_.initial(array, [n])

Devuelve todo, pero especifica la última entrada de la matriz en la lista.
21

_.last(array, [n])

Especifica el último elemento de la matriz en la lista.
22

_.rest(array, [index])

Define los elementos restantes de la matriz.
23

_.without(array, *values)

Devuelve los valores de todas las instancias que se eliminan de la lista.
24

_.indexOf(array, value, [isSorted])

Devuelve el valor si se encuentra en un índice especificado o devuelve -1, si no se encuentra.
25

_.indexOf(array, value, [fromIndex])

Devuelve la última aparición del valor en la matriz o devuelve -1, si no se encuentra.
26

_.isEmpty(object)

Devuelve verdadero si no hay valores en la lista.
27

_.chain(obj)

Devuelve un objeto envuelto.

El enrutador se utiliza para enrutar las aplicaciones del lado del cliente y define la representación URL del objeto de la aplicación. Se requiere un enrutador cuando las aplicaciones web proporcionan URL enlazables, marcadas y compartidas para ubicaciones importantes en la aplicación.

La siguiente tabla enumera los métodos que se pueden utilizar para manipular BackboneJS - Router -

S.No. Métodos y descripción
1 ampliar

Extiende la clase de enrutador de la red troncal.
2 rutas

Define la representación URL de los objetos de las aplicaciones.
3 inicializar

Crea un nuevo constructor para la instanciación del enrutador.
4 ruta

Crea una ruta para el enrutador.
5 navegar

Se utiliza para actualizar la URL en las aplicaciones.
6 ejecutar

Se utiliza cuando una ruta coincide con su devolución de llamada correspondiente.

Mantiene un registro del historial, coincide con la ruta adecuada, activa devoluciones de llamada para manejar eventos y habilita el enrutamiento en la aplicación.

comienzo

Este es el único método que se puede utilizar para manipular el BackboneJS-History. Comienza a escuchar rutas y administra el historial de URL que se pueden marcar.

Sintaxis

Backbone.history.start(options)

Parámetros

options - Las opciones incluyen los parámetros como pushState y hashChange usado con historia.

Ejemplo

<!DOCTYPE html>
<html>
   <head>
      <title>History 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>
   </head>
   
   <script type = "text/javascript">
      //'Router' is a name of the router class
      var Router = Backbone.Router.extend ({

         //The 'routes' maps URLs with parameters to functions on your router
         routes: {
            "myroute" : "myFunc"
         },

         //'The function 'myFunc' defines the links for the route on the browser
         myFunc: function (myroute) {
            document.write(myroute);
         }
      });

      //'router' is an instance of the Router
      var router = new Router();

      //Start listening to the routes and manages the history for bookmarkable URL's
      Backbone.history.start();
   </script>
   
   <body>
      
      <a href = "#route1">Route1 </a>
      <a href = "#route2">Route2 </a>
      <a href = "#route3">Route3 </a>
   </body>
   
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

  • Guarde el código anterior en el start.htm archivo.

  • Abra este archivo HTML en un navegador.

NOTE- La funcionalidad anterior está relacionada con la barra de direcciones. Entonces, cuando abra el código anterior en el navegador, mostrará el resultado de la siguiente manera.

Se utiliza para conservar el estado del modelo en el servidor.

La siguiente tabla enumera los métodos que se pueden utilizar para manipular BackboneJS-Sync -

S.No. Métodos y descripción
1 Backbone.sync

Conserva el estado del modelo en el servidor.
2

Backbone.ajax

Define la función ajax personalizada.
3 Backbone.emulateHTTP

Si su servidor web no admite el enfoque REST o HTTP, encienda Backbone.emulateHTTP.
4 Backbone.emulateJSON

Se utiliza para manejar las solicitudes codificadas con application/json configurando el método en true.

Las vistas se utilizan para reflejar "cómo se ve su modelo de datos". Representan los datos del modelo para el usuario. Proporcionan la idea detrás de la presentación de los datos del modelo al usuario. Maneja los eventos de entrada del usuario, vincula eventos y métodos, renderiza modelos o colecciones e interactúa con el usuario.

La siguiente tabla enumera los métodos que se pueden utilizar para manipular BackboneJS-Views.

S.No. Métodos y descripción
1 ampliar

Extiende el Backbone.View class para crear una clase de vista personalizada.
2 inicializar

Crea una instancia de la vista utilizando la nueva palabra clave.
3 el

Define qué elemento se utilizará como referencia de vista.
4 $ el

Representa el objeto jQuery para el elemento de la vista.
5 setElement

Especifica el elemento DOM existente a un elemento DOM diferente.
6 atributos

Se pueden usar como atributos de elementos DOM en la clase de vista.
7 $ (jQuery)

Se usa como un selector que contiene la función $ y ejecuta consultas dentro del elemento de la vista.
8 modelo

Al representar la vista, la plantilla crea copias reutilizables de marcado y proporciona acceso a los datos de la instancia.
9 hacer

Contiene la lógica para renderizar una plantilla.
10 eliminar

Elimina una vista del DOM.
11 delegateEvents

Vincula elementos a los elementos DOM especificados con métodos de devolución de llamada para manejar eventos.
12 undelegateEvents

Elimina los eventos delegados de la vista.

La clase de utilidad define un conjunto de métodos utilizados para implementar la utilidad de red troncal.

La siguiente tabla enumera los métodos que puede utilizar para manipular el BackboneJS-Utility -

S.No. Métodos y descripción
1 Backbone.noConflict

Muestra el valor original del objeto Backbone y permite almacenar referencias a un backbone.
2 Espina dorsal. $

Permite que Backbone use un objeto particular como biblioteca DOM.