Presentaci n basada en el curso óIntroducci n a Backbone.js de easynubeó

Cons guelo gratis en í easynube.com

Backbone.js a través de un caso pr cticoá

Backbone.js a trav s éde un caso pr cticoá

Backbone.js a través de un caso pr cticoá

Aplicaci nó

Backbone.js a través de un caso pr cticoá

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.

Aplicaci nó

Backbone.js a través de un caso pr cticoá

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.

Backbone.Model

Backbone.js a través de un caso pr cticoá

Los Modelos son el coraz n de ócualquier aplicaci n javascript ó ;contienen la informaci n con la ócual se interact a y una gran úparte de la l gica que la rodea ó :conversiones, validaciones, propiedades y control de acceso.

“Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it :conversions, validations, computed properties, and access control. ”

Backbone.Model

Backbone.js a través de un caso pr cticoá

Backbone.Model.extend({t tulo Programming Python ,í : ' 'autor Mark Lutz ,: ' 'sumario : '…'

});

En la pr cticaá :

T tulo Programming Pythoní :Autor Mark Lutz:Resumen ...:

Backbone.Collection

Backbone.js a través de un caso pr cticoá

Las colecciones son grupos ordenados de modelos. Puedes ligar los eventos change para ' 'notificar cuando se produzca un cambio en un modelo, escuchar eventos add y remove , ' ' ' 'recuperar la colecci n del óservidor [...]

Collections are ordered sets of models. You can bind change " "events to be notified when any model in the collection has been modified, listen for add " "and remove events, fetch " "the collection from the server ... [ ]

Backbone.Collection

Backbone.js a través de un caso pr cticoá

// InicializarBackbone.Collection.reset({

t tulo Programming Python ,í : ' 'autor Mark Lutz ,: ' 'sumario : '…'

});

// desde servidorBackbone.Collection.fetch();

// opsBackbone.Collection.get id( )

// eventos [add, remove, reset...]Backbone.Collection.bind add (' 'function () {});

En la pr cticaá :

Backbone.View

Backbone.js a través de un caso pr cticoá

La idea principal es organizar tu interfaz en vistas l gicas, óconectadas a sus respectivos modelos, y que cada una de las cu les pueda actualizarse áindependientemente cuando su modelo cambie, sin tener que actualizar la p gina completa.á

The general idea is to organize your interface into logical views, backed by models, each of which can be updated independently when the model changes, without having to redraw the page.

Backbone.View

Backbone.js a través de un caso pr cticoá

Backbone.View.extend({el $( detail ),: '# 'Events {:

“click corazon” “add wishlist”# : _},add wishlist function() {_ :

Wishlist.add(this.model);}

});

Backbone.View.extend({className book ,: ' 'render function() {:

$(this.el).html( .template( _

this.model.toJSON() ))

};});

Backbone.View

Backbone.js a través de un caso pr cticoá

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 = $sidebar('# ')

Se puede definir un elemento existente

Backbone.view.tagName =span“ ”

Se puede elegir el tipo de elemento

Backbone.view.className =book“ ”

Se puede definir un elemento con clase ( div class ”book” )< = >

Backbone.view.id =book“ ”

Se puede definir un elemento con id ( div id ”book” )< = >

Backbone.Router

Backbone.js a través de un caso pr cticoá

Backbone.Router ofrece métodos para trabajar con rutas en el lado del cliente, conect ndolas con acciones y áeventos.

Backbone.Router provides methods for routing client-side pages, and connecting them to actions and events.

Backbone.Router

Backbone.js a través de un caso pr cticoá

Backbone.Router.extend({routes {:

'': index ,' 'book ': ': see detail' _ '

}})

URL /:

index()

URL :/ 3#

see detail(book)_/ book 3 /* = *

Cons guelo gratis en easynube.comí

Implementa esta aplicaci n a través del curso óIntroducci n a Backbone.jsó de easynube: