Backbonejs ejemplo practico – Como empezar y Modelos

Hola bienvenidos esta publicación perteneces a una serie dedicada exclusivamente a guiarme conocer mas esta librería

Puedes acceder a todos las publicaciones  a continuación:

Introducción a backbonejs

Para comenzar  mi aventura con backbonejs es de sobra comentar que toda la información  necesaria esta en su pagina oficial  http://backbonejs.org/

Lo primero que necesitamos es incluir las librerías a nuestro html

BackboneJs tiene como dependencias jquery y undercorejs por lo que hay que incluirlos antes de backbonejs. Nuestro html inicial luce de la siguiente manera:

 

Una vez completado la “instalación” de las librerías comenzaremos a describir que es un modelo y por que es importante usarlos.

 

En el cual es la típica estructura de jquery para validar los datos y enviar los datos al servidor. Nuestro pan de todos los días. (algo burda!! Fue lo primero que se me ocurrio.)

 

Ahora que ya tenemos una estructura familiar vamos a convertirla a una estructura que backbonejs pueda manejar. Es donde entra el rol del modelo.

Modelo: Un modelo contiene la interacción de los datos encargándose de las partes:  conversión, validaciones, tratamiento de los datos, propiedades y control acceso. En otras palabras será nuestra estructura para manejar  los datos. Para definir un nuevo modelo, debe “heredar” Backbone.Model.extend(properties, [classProperties]) de la siguiente manera:  

Entonces tenemos una estructura de control para representar nuestros datos y por si fuera poco podemos aplicar una especie de herencia para reutilizar mucho código ( ò_ó ).

 

Bueno pero no hemos hecho nada…  vamos a ir sustituyendo nuestro código con jquery e irlo adaptando a utilizar un modelo de backbonejs. El primer paso como ya mencionamos es crear un modelo:

 

Ahora que ya hemos creado nuestro modelo, también iniciaremos nuestra implementación del modelo $usuario. Vamos a hacer un pequeño cambio al código para desde ahora utilizar nuestro modelo. Que hay que notar en esta ultima modificación Existe varias forma de inciarlizar nuestro modelo, enviándole en forma de json al instanciar el modelo. O Utilizando setters y getters. Como lo estamos viendo… Otras de las ventajas de utilizar los getters y setters es que backbonejs tiene una característica que dispara un evento cada vez que uno de los atributos es modificado. Es lo que les mostrare a continuación. De esta forma logramos tener un mayor control de los cambios realizados en el modelo, lo cual es grandioso. Por ejemplo actualiza el html, arrojar advertencias, validaciones, Pero que sorpresa ya tenemos un método para validar, es lo que agregaremos ahora. En resumen hasta el momento, organizamos nuestro datos en una estructura (modelo), tenemos eventos por si cambia algo… validación de los datos. Y mucho mas como que si todo esta correcto que guarde la información al servidor. (Apoco no es genial!!!). Para hacer que guarde los datos, lo que necesitamos hacer es establecer una url donde los guarde. Después de ello llamar al método sabe() . Lo veremos a continuación.

En conclusión el uso de modelos centraliza la información, eventos, validaciones y muchos mas en una estructura, que es muy simple de comprender. En la siguiente entrada aprenderemos Colecciones

 

Ejemplo completo en: https://github.com/fcarrizalest/Ejemplos/blob/master/Backbonejs/modelo/index.html