Introducción A Backbone - Js - Modelos

Tutoriales / Introduccin a Backbone.
js : Modelos
Introduccin a Backbone.js : Modelos
Por vlycser el 26 de Abril de 2012 con 18,578 visitas
HTML, CSS y Javascript Otros tutoriales por vlycser.

Twittear
40

Con el pasar del tiempo en el mundo del desarrollo web, hemos visto la aparicin de cientos de Frameworks con
el objetivo de agilizar el proceso de desarrollo. Javascript no ha sido ajeno a esta corriente y hoy da podemos
encontrar Mootools, Dojo, Ext Core, Prototype y jQuery entre otros ms.
A pesar de ser tan poderosas herramientas de desarrollo, ninguna posee algn tipo de lineamiento o estructura para crear nuestro cdigo y con el pasar del
tiempo nos vamos llenando de una cantidad de lneas y archivos en JS con un montn de selectores y funciones por todos lados (Cdigo Spaghetti).
Hoy hablaremos sobre Backbone.js, una librera Javascript creada por Jeremy Ashkenas, el mismo seor que ha creado CoffeeScript . Esta librera nos da la
posibilidad de implementar el patrn de desarrollo MVC en Javascript adems de otra gran cantidad beneficios.
Backbone.js posee cuatro clases principales:
Model
View
Router
Collection
El siguiente tutorial es obtenido a partir de la lectura de otros tutoriales, la documentacin de Backbone.js y las experiencias
durante este proceso.
Manos a la obra
Primero vamos a crear una estructura HTML desde donde llamar nuestros archivos JS.
Cdigo :
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset='utf-8'>
<title>Introduccion a Blackbone.js + Mustache.js</title>
</head>
<body>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="js/backbone-min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Blackbone.js requiere estrictamente la librera Underscore.js para funcionar. Esta debe ir primero que blackbone.js
Model
32
Like
Foros Blog Tutoriales Cursos Videotutoriales Comic
Publica un tutorial Qu es Cristalab? Tags Ejemplos Contctanos Anime
o
Olvidaste tu usuario o clave? registrate
Introduccin a Backbone.js : Modelos http://www.cristalab.com/tutoriales/introduccion-a-backbone.js-model...
1 de 8 11/13/2013 3:17 PM
En Backbone.js los modelos son el corazn de nuestra aplicacin, imaginmoslos como un conjunto de atributos y mtodos de la forma {key:value} donde
los valores pueden ser funciones, objetos o arreglos.
Cdigo :
(function(){
var DesarrolladorModel = Backbone.Model.extend();
})();
De esta forma hemos extendido todos los mtodos y atributos de la clase
Backbone.Model en DesarrolladorModel .
Agreguemos algunos atributos a nuestra clase DesarrolladorModel:
Cdigo :
(function(){
var DesarrolladorModel = Backbone.Model.extend({
initialize: function(){
console.info("Nuevo modelo de: DesarrolladorModel");
},
defaults:{
nombre: "Pepito Perez",
edad: 24,
lenguajes:[]
}
});
})();
La funcin initialize como su nombre lo indica se ejecuta automticamente al crear una nueva instancia de nuestro modelo. Por el momento no veremos
ningn cambio.
El atributo "defaults" nos permite definir valores por defecto para nuestro modelo.
Ahora vamos a crear una instancia de nuestro modelo DesarrolladorModel:
Cdigo :
(function(){
// Crear modelo
},
defaults:{
edad: 24,
lenguajes:[]
}
});
// Crear instancia
var desarrollador = new DesarrolladorModel;
})();
Si nos fijamos en nuestra consola, vamos a ver el mensaje que definimos en la funcin del atributo initialize.
Para ver que atributos posee nuestro nuevo modelo puedes hacer esto:
Cdigo :
console.dir(desarrollador.attributes);
Tambin podemos definir unos atributos durante la creacin del modelo:
Cdigo :
2 de 8 11/13/2013 3:17 PM
(function(){
// Crear modelo
},
defaults:{
edad: 24,
lenguajes:[]
}
});
// Crear instancia
// Crear otra instancia cambiando valores
var desarrollador2 = new DesarrolladorModel({
nombre: "Mario marito",
edad: 19,
lenguajes: ["Javascript", "C"],
editor: "Sublime Text 2"
});
})();
Podemos definir atributos aun despus de creado el modelo a travs del mtodo .set():
Cdigo :
(function(){
// Crear modelo
},
defaults:{
edad: 24,
lenguajes:[]
}
});
// Crear instancia
edad: 19,
});
// Agregando atributos posteriormente
desarrollador.set({editor: "Notepad++"});
})();
Para obtener los atributos individuales de cada modelo podemos usar el mtodo .get():
Cdigo :
desarrollador2.get("editor");
Ahora vamos a crear un mtodo para nuestro modelo que nos permita agregar lenguajes de programacin a las instancias.
Cdigo :
3 de 8 11/13/2013 3:17 PM
(function(){
// Crear modelo
},
defaults:{
edad: 24,
lenguajes:[]
},
addLenguaje: function(nuevoLenguaje){
//Obtenemos lenguajes del model
var array_lenguajes = this.get('lenguajes');
//Adicionamos el nuevo lenguaje
array_lenguajes.push(nuevoLenguaje);
// Redefinimos el atributo lenguajes
this.set({lenguajes:array_lenguajes});
}
});
// Crear instancia
edad: 19,
});
// Agregar nuevo lenguaje
desarrollador.addLenguaje("Python");
})();
Bueno, hasta ahora nada del otro mundo, un montn de objetos con funciones dentro podran decir ustedes, por eso seguimos con lo bueno de esta librera.
En Backbone.js podemos asignar eventos de escucha, es decir, cuando un atributo del modelo cambie generamos un evento particular.
Cuando la propiedad editor de nuestro modelo cambie, dispararemos un evento que genere un mensaje en consola:
En este caso pondremos en escucha el evento desde el atributo "initialize", pero tambin puede ser llamado desde la
instancia del modelo.
Cdigo :
4 de 8 11/13/2013 3:17 PM
(function(){
// Crear modelo
// Escuchando cambios para el modelo
this.on("change:editor", function(){
console.log("Has modificado el editor");
});
},
defaults:{
edad: 24,
lenguajes:[]
},
}
});
// Crear instancia
edad: 19,
});
})();
En la consola debemos estar visualizando el mensaje que definimos en el evento change:editor.
Si deseramos que el evento se iniciara al modificar cualquier atributo del modelo lo haramos retirando el valor de change para que escuche sobre cualquier
atributo.
Cdigo :
this.on("change", function(){ ... });
Como dije anteriormente tambin podemos llamar el evento desde la instancia de nuestro modelo.
Cdigo :
desarrollador.on("change:editor", function(){ ... });
Otra funcin de las muchas que poseen los modelos de Backbone.js es validate, la cual nos permite realizar validaciones previas a los cambios que se
apliquen a las instancias de nuestros modelos.
Imagina que la funcin validate es un polica que te chequea antes de entrar, Si cumples con los requisitos te dejar pasar y podrs realizar tus actividades.
Pero si no los cumples no te dejar pasar y mandar un mensaje de error.
Realizaremos una validacin en nuestro modelo que se encargar de verificar si el editor de uno de nuestros desarrolladores (instancias de modelo) es
Dreamweaver. Luego tendremos un evento en escucha de este error que nos genere un log en la consola con el mensaje de error.
Cdigo :
5 de 8 11/13/2013 3:17 PM
(function(){
// Crear modelo
this.on("change:editor", function(){
console.log("Has modificado el editor");
});
// Evento a la escuha del error
this.on("error", function(model, error){
console.log(error);
});
},
defaults:{
edad: 24,
lenguajes:[]
},
},
// Funcion de validacion
validate: function(attributes){
if(attributes.editor == "Dreamweaver"){
return "Dreamweaver no es un editor permitido!";
}
}
});
// Crear instancia
edad: 19,
});
desarrollador.set({editor: "Dreamweaver"});
})();
Segn lo anterior, en nuestra consola deberamos tener dos mensajes. El primero con el mensaje de cambio de editor realizado correctamente y el segundo
avisndonos que Dreamweaver no es un editor vlido.
La funcin validate es muy sencilla. Recibimos los atributos, los verificamos y retornamos un mensaje de error.
Cdigo :
// Funcion de validacion
validate: function(attributes){
if(attributes.editor == "Dreamweaver"){
return "Dreamweaver no es un editor permitido!";
}
}
El evento on.("error") ubicado en el atributo de initialize recibe el modelo donde se produjo el error y el mensaje de dicho error. Finalizando la actividad que
dispar el evento sin que sta se lleve a cabo.
Cdigo :
6 de 8 11/13/2013 3:17 PM
Efecto Parallax con Stellar.js Insertar datos a MySQL con jQuery y
CodeIgniter
Tendencias del desarrollo Web Frontend
en el 2012
Anterior 1 2
Por vlycser el 24 de Enero de 2013
Alan Cristhian-blog :
Como hacs para emular las operaciones RESTful?
Del lado del servidor debes utilizar un lenguaje que detecte estos tipos de peticiones HTTP como Node, PHP, Python o Ruby.
En el cliente con Backbone.js existen ciertos mtodos que al ejecutarse sobre los modelos envan estos diferentes tipos de peticiones HTTP.
Ejemplo:
Si tengo un modelo recin creado (sin ID) y hago un save, esta peticin sera un POST (Create)
Cdigo :
modelo.save(); // Sin ID -> POST
Al ejecutar save sobre un modelo que posee un ID, esta peticin sera un PUT (Update)
Cdigo :
modelo.save(); // Con ID -> PUT
Si invocamos el mtodo fetch sobre un modelo o una coleccin, genera una peticin GET (Read)
Cdigo :
modelo.fetch(); // GET
Llamando al mtodo destroy sobre un modelo, genera una peticin DELETE (Delete)
Cdigo :
modelo.destroy(); // DELETE
Por Chofoteddy el 19 de Febrero de 2013
La verdad es que ste comienzo me ha sido de bastante ayuda para comenzar en el mundo del espinazo (Backbone) .
Envia un comentario (29)
// Evento a la escuha del error
this.on("error", function(model, error){
console.log(error);
});
Podemos obtener valores de los atributos aplicando el mtodo ".get()" al modelo que recibimos en el evento error.
Source / Demo
De esta forma terminamos el primer tutorial de Blackbone.js y modelos. Los invito a que lean la documentacin que es muy completa y con ejemplos para
todos los mtodos.
En el segundo tutorial de Blackbone.js trataremos las vistas. Espero que este haya sido de su agrado.
Yo tambin soy novato en el mundo de Blackbone.js, cualquier duda o sugerencia trataremos de resolverla entre todos.
@vlycser
300 Crear tienda online
www.kunuh.com/
Tienda Kunuh + 1000 Adwords y 6 meses de mantenimiento
7 de 8 11/13/2013 3:17 PM
Publica tu comentario
Tu nombre:
Tu comentario:
o puedes...
Ests registrado en
Cristalab y quieres
publicar tu URL y avatar?
No ests registrado an
pero quieres hacerlo antes
de publicar tu comentario?
Gracias!
Por hersheylg el 04 de Abril de 2013
Que genial simplemente genial, no me gusta para nada el javascript pero cuando vi lo ordenado que esto lo deja como que ya empiezo a agarrarle el hilo
Por Beto el 31 de Mayo de 2013
realice el ejemplo pero no me marca el error de validacin solo sale has modificado el editor
Anterior 1 2
Blog Foros Tutoriales Tutoriales de Flash Ejemplos .fla Anime Videotutoriales Cursos Curso de Flash Curso de HTML Tags
S respetuoso. S detallado.
No escribas con mayusculas ni como
si fuera un SMS.
Insultos, trolls y spammers son
siempre eliminados.
[b]negrita[/b]
[img]http://url/imagen.jpg[/img]
[url=direccion]tu enlace[/url]
8 de 8 11/13/2013 3:17 PM

Introducción A Backbone - Js - Modelos

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Introducción A Backbone - Js - Modelos

Încărcat de

Drepturi de autor:

Formate disponibile

Tutoriales / Introduccin a Backbone.

S-ar putea să vă placă și