Cargando

Ir a contenido



Ver Más! Que no te lo cuenten, es mejor VERLO 👀 !! En este vídeo verás una buena forma de entender cómo trabajamos para ayudarte. Únete, y danos tu Like 👍🏻 para ayudarnos, GRACIAS!


 


Backbone.js - Vistas

En este tutorial vamos a ver como funcionan las vistas en Backbone.js para poder tener las herramientas que nos permitan lograr aplicaciones de acuerdo a nuestras necesidades.


Escrito por el abr 14 2014 00:52 backbone js


Backbone.js está basado en la estructura MVC, además de poseer modelos, también posee vistas, según la filosofía de esta arquitectura de construcción de software las vistas son las que tienen la responsabilidad de mostrar al usuario los datos que se generan entre el controlador y el modelo dependiendo de la petición que se ha hecho.

En Backbone.js esto funciona un poco diferente, la vista no contiene como tal elementos que el usuario ve directamente, si no que comunica los datos a través de un motor de plantillas.

Las Vistas en Backbone.js

En Backbone.js las vistas como tal no contienen lenguaje HTML que pueda ser mostrado al usuario de nuestra aplicación, al contrario contienen la lógica que nos permitirá construir el funcionamiento de la parte frontal de la aplicación que estemos desarrollando utilizando el modelo como base, es decir, lo que tengamos en el modelo lo vamos a manipular en la vista teniendo así dos niveles de acción.

Para mostrar datos recurriremos al método render() que nos permite pasar los datos desde nuestra vista a una plantilla, dicha plantilla está construida en algún motor de plantillas Javascript como por ejemplo: Underscore, Mustache, Jquery-tpml, etc.

Creación de la Vista

Para crear una vista seguimos un proceso bastante directo y similar a la creación de un modelo, para generar la vista solo debemos extender de Backbone.View, veamos cómo se comporta esto al ejecutarlo en nuestra consola de Chrome utilizando un archivo HTML con las librerías de Backbone.js, jsquery y underscore ya cargadas.

Primero veamos el código que colocaremos en nuestra consola:

var TodoView = Backbone.View.extend({
tagName: 'li',
// Carga en cache la función de la plantilla para un único item.
todoTpl: _.template( "Una Plantilla de ejemplo" ),
events: {
'dblclick label': 'edit',
'keypress .edit': 'updateOnEnter',
'blur .edit': 'close'
},
//Vuelve a generar los titulos de la etiqueta del elemento.
render: function() {
this.$el.html( this.todoTpl( this.model.toJSON() ) );
this.input = this.$('.edit');
return this;
},
edit: function() {
// Es ejecutado cuando se hace doble click en la etiqueta
},
close: function() {
// se ejecuta cuando se quita el foco del elemento
},
updateOnEnter: function( e ) {
// se ejecuta cuando se presiona una tecla al estar en modo edición,
// sin embargo espera a que se presione enter para entrar en acción
}
});

Como podemos ver, luego que hacemos el extend correspondiente vamos inicializando una cantidad de atributos que harán que nuestra vista funcione, adicionalmente en cada elemento colocamos los comentarios para que sepamos cómo funciona.

Ahora veamos en consola que sucede cuando llamamos a la vista:

backbone_vistas.jpg


Importante
Al llamar al elemento el en el console.log() que le hicimos al objeto que instanciamos de nuestra vista, lo que hacemos es imprimir el elemento DOM correspondiente, de esta forma es que nuestras vistas pueden componer sus elementos y con ello ser insertados de una vez en el árbol DOM del documento plantilla.


Con esto finalizamos este tutorial con lo cual ya hemos dado un paso adelante en lo que corresponde la generación de vistas en una aplicación MVC utilizando Backbone.js.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado abr 14 2014 00:52
  •   Actualizado abr 15 2014 23:16
  •   Visitas 802
  •   Nivel
    Profesional