Your SlideShare is downloading. ×
0
Introducción a Backbone.js con un caso práctico - easynube
Introducción a Backbone.js con un caso práctico - easynube
Introducción a Backbone.js con un caso práctico - easynube
Introducción a Backbone.js con un caso práctico - easynube
Introducción a Backbone.js con un caso práctico - easynube
Introducción a Backbone.js con un caso práctico - easynube
Introducción a Backbone.js con un caso práctico - easynube
Introducción a Backbone.js con un caso práctico - easynube
Introducción a Backbone.js con un caso práctico - easynube
Introducción a Backbone.js con un caso práctico - easynube
Introducción a Backbone.js con un caso práctico - easynube
Introducción a Backbone.js con un caso práctico - easynube
Introducción a Backbone.js con un caso práctico - easynube
Introducción a Backbone.js con un caso práctico - easynube
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

6,770

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 …

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
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,770
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
58
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. Backbone.js a través de un caso prácticoBackbone.js a travé s de un caso práctico
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Implementa esta aplicación a través del cursoIntroducción a Backbone.js de easynube: Consíguelo gratis en easynube.com

×