2. ¿Qué es Backbone.js?
Es un entorno pseudo-MVC creado por
DocumentCloud
Ayuda a estructurar el código javascript
Ofrece una jerarquía de objetos
Lo mejor contra el spaghetti-code en javascript ;)
13. Creación del modelo
Va a contener los datos de un vídeo de YouTube
● Id
● Dimensiones
● URL de los streams
● Comentarios, etiquetas, miniaturas
● Y un montón más de información...
15. Creación de la colección
Contiene la lista de vídeos obtenidos mediante la
consulta a la API de YouTube
http://gdata.youtube.com/feeds/api/videos
16. Creación de la colección
var Collections = {
Videos: Backbone.Collection.extend({
model: Models.Video,
url: 'http://gdata.youtube.com/feeds/api/videos?
v=2&alt=jsonc&max-results=9',
parse: function(resp) {
return resp.data.items;
},
}),
};
17. Creación de la colección
¿Por qué una función parse()?
{
"apiVersion": "2.1",
"data": {
"updated": "2012-09-04T20:24:14.876Z",
"totalItems": 1000000,
"startIndex": 1,
"itemsPerPage": 10,
"items": [
{
"id": "EGs6MgYOVxg",
"uploaded": "2012-08-30T00:00:10.000Z",
...
18. Creación de la colección
¿Por qué una función parse()?
Backbone.js espera recibir un conjunto de
elementos.
El resultado de la API que nos interesa está
dentro de una jerarquía, por lo que hay que
devolver el elemento concreto que contiene el
array de vídeos.
19. Creación de la vista de un vídeo
Contiene la representación del vídeo: el elemento
<object> que carga el reproductor en Adobe Flash
Además muestra otra información del vídeo como
el creador, la descripción, etc...
20. Creación de la vista de la aplicación
Esta vista se va a encargar de cargar la lista de
vídeos en una colección de Backbone.js
Gestionará el evento de carga de la colección
para mostrar la lista de vídeos
21. ¿Qué ha faltado?
Muchas cosas:
● Crear o modificar modelos y guardar los datos
● Usar enrutadores
● Crear vistas más complejas
Pero todo esto es material para una próxima
edición de betabeers, si os parece bien.
22. Referencias
● Backbone.js: tutoriales, demos y más
– https://github.com/documentcloud/backbone/wiki
● Código de la aplicación de ejemplo
– https://github.com/dsthode/taller-betabeers-20120906
● Post explicando el taller
– http://dsthode.info/2012/09/crear-una-aplicacion-sencilla-con-backbone-js/