Introducción a Backbone.js con un caso práctico - easynube

7,508 views

Published on

Backbone.js es una librería JavaScript que nos permite crear aplicaciones siguiendo el patrón MVC. En este tutorial crearemos una aplicación desde cero con Backbone.js para familiarizarnos con el framework. Veremos como estructurar aplicaciones utilizando las colecciones, modelos, vistas y routers de Backbone. Se puede descargar el código final y tenerlo como referencia para empezar a crear vuestras aplicaciones. Se asumen conocimientos básicos de HTML/CSS y Javascript.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,508
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
64
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Introducción a Backbone.js con un caso práctico - easynube

  1. 1. Backbone.js a través de un caso práctico Presentación basada en el curso Introducción a Backbone.js de easynubeConsíguelo gratis en easynube.com
  2. 2. Backbone.js a través de un caso prácticoBackbone.js a travé s de un caso práctico
  3. 3. Backbone.js a través de un caso prácticoAplicación Una tienda de libros en la cual se pueden examinar los detalles de cada libro y añadirlos a una lista de deseos. Dentro de la lista será posible visitar los libros con un click así como eliminarlos de la lista.
  4. 4. Backbone.js a través de un caso prácticoAplicación Una tienda de libros en la cual se pueden examinar los detalles de cada libro y añadirlos a una lista de deseos. Dentro de la lista será posible visitar los libros con un click así como eliminarlos de la lista.
  5. 5. Backbone.js a través de un caso práctico Backbone.Model“Models are the heart of any Los Modelos son el corazón deJavaScript application, cualquier aplicación javascript;containing the interactive data contienen la información con laas well as a large part of the cual se interactúa y una granlogic surrounding it: parte de la lógica que la rodea:conversions, validations, conversiones, validaciones,computed properties, and propiedades y control deaccess control.” acceso.
  6. 6. Backbone.js a través de un caso práctico Backbone.ModelEn la práctica: Título: Programming Python Autor: Mark Lutz Resumen: ... Backbone.Model.extend({ título: Programming Python, autor: Mark Lutz, sumario: … });
  7. 7. Backbone.js a través de un caso práctico Backbone.CollectionCollections are ordered sets of Las colecciones son gruposmodels. You can bind "change" ordenados de modelos. Puedesevents to be notified when ligar los eventos change paraany model in the collection has notificar cuando se produzca unbeen modified, listen for "add" cambio en un modelo, escucharand "remove" events, fetch eventos add y remove,the collection from the server recuperar la colección del[ ...] servidor [...]
  8. 8. Backbone.js a través de un caso práctico Backbone.CollectionEn la práctica: // Inicializar Backbone.Collection.reset({ título: Programming Python, autor: Mark Lutz, sumario: … }); // desde servidor Backbone.Collection.fetch(); // ops Backbone.Collection.get(id) // eventos [add, remove, reset...] Backbone.Collection.bind(add function() {});
  9. 9. Backbone.js a través de un caso práctico Backbone.ViewThe general idea is to organize La idea principal es organizar tuyour interface into logical interfaz en vistas lógicas,views, backed by models, each conectadas a sus respectivosof which can be updated modelos, y que cada una de lasindependently when the model cuáles pueda actualizarsechanges, without having to independientemente cuando suredraw the page. modelo cambie, sin tener que actualizar la página completa.
  10. 10. Backbone.js a través de un caso práctico Backbone.ViewBackbone.View.extend({ Backbone.View.extend({ el: $(#detail), className: book, Events: { render: function() { “click #corazon”: “add_wishlist” $(this.el).html( }, _.template( add_wishlist: function() { this.model.toJSON() Wishlist.add(this.model); )) } };}); });
  11. 11. Backbone.js a través de un caso práctico Backbone.View Una vista (view) de Backbone siempre tiene un elemento DOM, se haya insertado en la página o no.Backbone.view.el El elemento por defecto es <div>Backbone.view.el = $ Se puede definir un elemento(#sidebar) existenteBackbone.view.tagName = Se puede elegir el tipo de elemento“ span”Backbone.view.className = Se puede definir un elemento con clase“ book” (<div class=”book”>)Backbone.view.id = Se puede definir un elemento con id“ book” (<div id=”book”>)
  12. 12. Backbone.js a través de un caso práctico Backbone.RouterBackbone.Router provides Backbone.Router ofrecemethods for routing client-side métodos para trabajar con rutaspages, and connecting them to en el lado del cliente,actions and events. conectándolas con acciones y eventos.
  13. 13. Backbone.js a través de un caso práctico Backbone.Router Backbone.Router.extend({ routes: { : index, :book: see_detail } }) URL:URL: / /#3index() see_detail(book) /* book = 3 */
  14. 14. Implementa esta aplicación a través del cursoIntroducción a Backbone.js de easynube: Consíguelo gratis en easynube.com

×